Vue 核心原理与响应式系统

// Vue 2 响应式实现原理
function defineReactive(obj, key, val) {
  const dep = new Dep(); // 每个属性都有一个依赖收集器

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      // 依赖收集：将当前的Watcher添加到依赖列表
      if (Dep.target) {
        dep.depend();
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      // 派发更新：通知所有依赖的Watcher重新渲染
      dep.notify();
    }
  });
}

// 依赖收集器
class Dep {
  constructor() {
    this.subs = []; // 存储所有Watcher
  }

  depend() {
    if (Dep.target) {
      this.subs.push(Dep.target);
    }
  }

  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

// 观察者
class Watcher {
  constructor(vm, expr, cb) {
    this.vm = vm;
    this.expr = expr;
    this.cb = cb;
    // 触发getter，进行依赖收集
    Dep.target = this;
    this.value = vm[expr];
    Dep.target = null;
  }

  update() {
    const newVal = this.vm[this.expr];
    this.cb(newVal);
  }
}

// Observer：将对象的所有属性转换为响应式
class Observer {
  constructor(obj) {
    this.walk(obj);
  }

  walk(obj) {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key, obj[key]);
    });
  }
}

// Vue 2 响应式的局限性
const vm = new Vue({
  data: {
    items: ['a', 'b', 'c'],
    user: { name: 'Alice' }
  }
});

// ❌ 无法检测到数组索引赋值
vm.items[0] = 'x'; // 不是响应式的
// ✅ 使用 Vue.set
Vue.set(vm.items, 0, 'x'); // 响应式的

// ❌ 无法检测到数组长度修改
vm.items.length = 2; // 不是响应式的
// ✅ 使用 splice
vm.items.splice(2); // 响应式的

// ❌ 无法检测到新增属性
vm.user.age = 25; // 不是响应式的
// ✅ 使用 Vue.set
Vue.set(vm.user, 'age', 25); // 响应式的

// Vue 2 数组响应式的实现原理（简化版）
const arrayProto = Array.prototype;
// 基于数组原型创建一个新对象
const arrayMethods = Object.create(arrayProto);

// 需要被重写的 7 个变更方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
];

methodsToPatch.forEach(method => {
  // 缓存原始方法
  const original = arrayProto[method];

  Object.defineProperty(arrayMethods, method, {
    value: function mutator(...args) {
      // 先执行原始的数组方法，得到结果
      const result = original.apply(this, args);
      const ob = this.__ob__; // Observer 实例

      // 对于新增元素的方法，需要把新元素也变成响应式
      let inserted;
      switch (method) {
        case 'push':
        case 'unshift':
          inserted = args;
          break;
        case 'splice':
          inserted = args.slice(2);
          break;
      }
      if (inserted) ob.observeArray(inserted);

      // 手动触发派发更新
      ob.dep.notify();
      return result;
    },
    enumerable: false,
    writable: true,
    configurable: true
  });
});

// Vue 3 响应式实现原理
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 依赖收集
      track(target, key);
      const result = Reflect.get(target, key, receiver);
      // 如果是对象，递归代理
      if (typeof result === 'object' && result !== null) {
        return reactive(result);
      }
      return result;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      // 派发更新
      if (oldValue !== value) {
        trigger(target, key);
      }
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      // 派发更新
      trigger(target, key);
      return result;
    }
  });
}

// 依赖收集
const targetMap = new WeakMap();
let activeEffect = null;

function track(target, key) {
  if (!activeEffect) return;

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }

  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }

  dep.add(activeEffect);
}

// 派发更新
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect());
  }
}

// effect 函数
function effect(fn) {
  activeEffect = fn;
  fn();
  activeEffect = null;
}

// Vue 3 响应式的优势
const state = reactive({
  items: ['a', 'b', 'c'],
  user: { name: 'Alice' }
});

// ✅ 可以检测到数组索引赋值
state.items[0] = 'x'; // 响应式的

// ✅ 可以检测到数组长度修改
state.items.length = 2; // 响应式的

// ✅ 可以检测到新增属性
state.user.age = 25; // 响应式的

// ✅ 可以检测到删除属性
delete state.user.name; // 响应式的

// 为什么需要 Reflect + receiver
const parent = {
  get fullName() {
    // 这里访问了 this.firstName
    return this.firstName + ' ' + this.lastName;
  }
};

const child = {
  firstName: 'Tom',
  lastName: 'Smith'
};
Object.setPrototypeOf(child, parent);

// 如果 get 陷阱里用 target[key]，访问 fullName 时
// this 会指向 parent 而不是代理，导致 firstName/lastName 的依赖收集不到
// 使用 Reflect.get(target, key, receiver) 则会把 this 正确绑定到代理对象
const proxyChild = new Proxy(child, {
  get(target, key, receiver) {
    track(target, key);
    return Reflect.get(target, key, receiver); // receiver 是代理本身
  }
});

// 依赖收集流程示例
const state = reactive({ count: 0 });

// 组件渲染函数
function render() {
  // 访问 state.count，触发 getter
  // 将 render 函数添加到 count 的依赖列表
  console.log('Count:', state.count);
}

// 收集依赖
effect(render); // render 被添加到 count 的依赖列表

// 修改数据，触发更新
state.count++; // 触发 setter，执行 render 函数

// 依赖关系的完整数据结构
// targetMap 结构示意：
// WeakMap {
//   reactiveObj1 => Map {
//     'count' => Set { effect1, effect2 },
//     'name'  => Set { effect3 }
//   },
//   reactiveObj2 => Map {
//     'price' => Set { effect4 }
//   }
// }

const state1 = reactive({ count: 0, name: 'a' });
const state2 = reactive({ price: 100 });

effect(() => document.title = String(state1.count)); // effect1 依赖 state1.count
effect(() => console.log(state1.name));              // effect3 依赖 state1.name
effect(() => console.log(state2.price));             // effect4 依赖 state2.price

// 修改 state1.count 只会触发 effect1，不会误触 effect3/effect4
// 这就是"精确依赖追踪"，是 Vue 3 性能优于 Vue 2 的关键之一
state1.count++;

// Vue 3 购物车响应式示例
import { reactive, computed } from 'vue';

const cart = reactive({
  items: [
    { id: 1, name: 'iPhone', price: 6999, count: 1 },
    { id: 2, name: 'AirPods', price: 1299, count: 2 }
  ]
});

// 总价是计算属性，依赖每个商品的 price 和 count
const totalPrice = computed(() =>
  cart.items.reduce((sum, item) => sum + item.price * item.count, 0)
);

console.log(totalPrice.value); // 6999 + 1299*2 = 9597

// Vue 3 中直接修改下标属性即可触发更新
cart.items[0].count = 3;
console.log(totalPrice.value); // 6999*3 + 1299*2 = 23595 ✅ 自动更新

// 简化的 Vue 2 响应式实现
function defineReactive(obj, key, val) {
  const dep = new Dep();

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      // 依赖收集
      if (Dep.target) {
        dep.depend();
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      // 派发更新
      dep.notify();
    }
  });
}

class Dep {
  constructor() {
    this.subs = [];
  }

  depend() {
    if (Dep.target) {
      this.subs.push(Dep.target);
    }
  }

  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

Dep.target = null;

// Vue 3 使用 Proxy 实现响应式
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 依赖收集
      track(target, key);
      const result = Reflect.get(target, key, receiver);
      return result;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      // 派发更新
      if (oldValue !== value) {
        trigger(target, key);
      }
      return result;
    }
  });
}

// 依赖收集
const targetMap = new WeakMap();
let activeEffect = null;

function track(target, key) {
  if (!activeEffect) return;

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }

  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }

  dep.add(activeEffect);
}

// 派发更新
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect());
  }
}

// 使用示例
const state = reactive({
  count: 0,
  name: 'Vue'
});

effect(() => {
  console.log(`Count: ${state.count}`);
});

state.count++; // 触发更新

// 更完整的 effect 实现：支持嵌套、清理旧依赖、调度器
const effectStack = [];
let activeEffect = null;

function cleanup(effectFn) {
  // 从所有依赖集合中移除自己，避免遗留的旧依赖
  effectFn.deps.forEach(dep => dep.delete(effectFn));
  effectFn.deps.length = 0;
}

function effect(fn, options = {}) {
  const effectFn = () => {
    cleanup(effectFn);       // 每次执行前先清理旧依赖
    activeEffect = effectFn;
    effectStack.push(effectFn);
    const res = fn();
    effectStack.pop();
    // 恢复上一个 activeEffect（支持嵌套 effect）
    activeEffect = effectStack[effectStack.length - 1];
    return res;
  };
  effectFn.deps = [];        // 记录该 effect 被哪些 dep 收集
  effectFn.options = options;
  if (!options.lazy) {
    effectFn();
  }
  return effectFn;
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const dep = depsMap.get(key);
  if (!dep) return;
  // 用新 Set 避免边遍历边增删导致死循环
  const depsToRun = new Set(dep);
  depsToRun.forEach(effectFn => {
    // 避免自身触发自身造成栈溢出
    if (effectFn === activeEffect) return;
    if (effectFn.options.scheduler) {
      effectFn.options.scheduler(effectFn); // 交给调度器
    } else {
      effectFn();
    }
  });
}

import { ref, isRef, unref } from 'vue';

// 创建响应式引用
const count = ref(0);
const message = ref('hello');
const isVisible = ref(true);

// 读写必须通过 .value
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1

// ref 也可以包装对象，内部会用 reactive 处理
const user = ref({ name: 'Alice', age: 20 });
user.value.age = 21; // 响应式

// 工具函数
console.log(isRef(count));   // true
console.log(unref(count));   // 等价于 isRef(count) ? count.value : count

// ref 的简化实现原理
function ref(value) {
  return new RefImpl(value);
}

class RefImpl {
  constructor(value) {
    this._value = convert(value); // 若是对象则转 reactive
    this.__v_isRef = true;
  }
  get value() {
    track(this, 'value'); // 依赖收集
    return this._value;
  }
  set value(newVal) {
    if (newVal !== this._value) {
      this._value = convert(newVal);
      trigger(this, 'value'); // 派发更新
    }
  }
}

function convert(value) {
  return typeof value === 'object' && value !== null
    ? reactive(value)
    : value;
}

import { reactive, toRefs, toRef } from 'vue';

const state = reactive({
  count: 0,
  user: { name: 'Bob' },
  list: [1, 2, 3]
});

state.count++;           // 响应式
state.user.name = 'Tom'; // 嵌套对象也是响应式
state.list.push(4);      // 数组方法响应式

// ❌ 错误：整体重新赋值会断开响应式
// state = reactive({ count: 100 }); // 丢失原有代理

// ❌ 错误：解构会丢失响应式
// const { count } = state; // count 是普通值，不再响应

// ✅ 正确：用 toRefs 解构保持响应式
const { count, user } = toRefs(state);
count.value++; // 依然响应式，且会同步回 state.count

// ✅ 用 toRef 单独转换某个属性
const countRef = toRef(state, 'count');

import { ref, computed } from 'vue';

const price = ref(100);
const quantity = ref(2);

// 只读计算属性
const total = computed(() => {
  console.log('计算 total'); // 只在依赖变化时打印
  return price.value * quantity.value;
});

console.log(total.value); // 打印"计算 total"，输出 200
console.log(total.value); // 直接返回缓存 200，不再打印
quantity.value = 3;       // 依赖变化，缓存失效
console.log(total.value); // 重新计算，输出 300

// 可写计算属性（带 get/set）
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`;
  },
  set(newValue) {
    const parts = newValue.split(' ');
    firstName.value = parts[0];
    lastName.value = parts[1];
  }
});

fullName.value = 'Jane Smith'; // 触发 set
console.log(firstName.value);  // Jane
console.log(lastName.value);   // Smith

// 反例：用 method 每次渲染都重排
export default {
  methods: {
    sortedList() {
      // 每次模板访问 sortedList() 都会执行，即使 list 没变
      return [...this.list].sort((a, b) => a.value - b.value);
    }
  }
};

// 正例：用 computed 缓存
export default {
  computed: {
    sortedList() {
      // 只有 this.list 变化时才重排
      return [...this.list].sort((a, b) => a.value - b.value);
    }
  }
};

import { ref, reactive, watch } from 'vue';

const keyword = ref('');
const user = reactive({ name: 'Tom', profile: { age: 20 } });

// 1. 侦听单个 ref
watch(keyword, (newVal, oldVal) => {
  console.log(`关键词从 ${oldVal} 变为 ${newVal}`);
});

// 2. 侦听 reactive 对象的某个属性（需用 getter 函数）
watch(
  () => user.name,
  (newVal, oldVal) => {
    console.log(`用户名: ${oldVal} -> ${newVal}`);
  }
);

// 3. 侦听多个数据源
watch([keyword, () => user.name], ([newKw, newName], [oldKw, oldName]) => {
  console.log('多源变化', newKw, newName);
});

// 4. 深度侦听
watch(
  () => user.profile,
  (newVal) => {
    console.log('profile 深层变化', newVal);
  },
  { deep: true }
);

// 5. 立即执行 + 深度
watch(
  user,
  (newVal) => {
    console.log('user 任意属性变化', newVal);
  },
  { immediate: true, deep: true }
);

import { ref, watch } from 'vue';

const keyword = ref('');
const results = ref([]);

watch(keyword, (newKw, oldKw, onCleanup) => {
  let canceled = false;
  // 注册清理函数：当下一次触发或组件卸载时执行
  onCleanup(() => {
    canceled = true; // 标记本次请求作废
  });

  const timer = setTimeout(async () => {
    const res = await fetch(`/api/search?q=${encodeURIComponent(newKw)}`);
    const data = await res.json();
    if (!canceled) {
      results.value = data; // 只有未被取消才写入
    }
  }, 300);

  onCleanup(() => clearTimeout(timer));
});

import { ref, watchEffect } from 'vue';

const count = ref(0);
const step = ref(1);

// 自动收集 count 和 step 作为依赖
const stop = watchEffect(() => {
  console.log(`count=${count.value}, step=${step.value}`);
});

count.value++; // 触发重新执行
step.value = 2; // 也会触发

// 停止侦听
stop();

<template>
  <div>
    <!-- 条件渲染 -->
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>

    <!-- 显示/隐藏（切换 display，不销毁 DOM） -->
    <p v-show="isVisible">我会被 display:none 隐藏</p>

    <!-- 列表渲染，务必带 key -->
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        {{ index }} - {{ item.name }}
      </li>
    </ul>

    <!-- 遍历对象 -->
    <div v-for="(value, key, index) in obj" :key="key">
      {{ index }}. {{ key }}: {{ value }}
    </div>

    <!-- 文本与 HTML -->
    <span v-text="rawText"></span>
    <div v-html="rawHtml"></div>

    <!-- 属性与事件绑定 -->
    <img :src="imgUrl" @click="onClick" />

    <!-- 一次性渲染，之后不再更新 -->
    <p v-once>{{ neverChangeAgain }}</p>

    <!-- 跳过编译，原样输出 mustache -->
    <p v-pre>{{ 这里不会被编译 }}</p>

    <!-- 防止闪烁：编译前隐藏未渲染的 mustache -->
    <p v-cloak>{{ message }}</p>
  </div>
</template>

<!-- ❌ 反例：v-for 与 v-if 同元素 -->
<li v-for="user in users" v-if="user.active" :key="user.id">
  {{ user.name }}
</li>

<!-- ✅ 正例一：computed 预过滤 -->
<li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>

<script>
export default {
  computed: {
    activeUsers() {
      return this.users.filter(u => u.active);
    }
  }
};
</script>

<!-- ✅ 正例二：外层 template 承载 v-if -->
<template v-for="user in users" :key="user.id">
  <li v-if="user.active">{{ user.name }}</li>
</template>

// Vue 3 自定义指令的完整钩子
const myDirective = {
  created(el, binding, vnode) {
    // 元素属性/事件绑定前
  },
  beforeMount(el, binding) {
    // 元素插入 DOM 前
  },
  mounted(el, binding) {
    // 元素插入 DOM 后（最常用）
    // binding.value 是指令的值，binding.arg 是参数，binding.modifiers 是修饰符
  },
  beforeUpdate(el, binding) {},
  updated(el, binding) {
    // 组件更新后
  },
  beforeUnmount(el, binding) {},
  unmounted(el, binding) {
    // 元素卸载后，做清理
  }
};

// 全局注册：自动聚焦指令
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

<!-- 使用自定义指令 -->
<template>
  <div>
    <!-- v-focus：挂载后自动聚焦 -->
    <input v-focus />

    <!-- v-permission：无权限则移除元素 -->
    <button v-permission="'user:delete'">删除</button>

    <!-- v-click-outside：点击外部触发回调 -->
    <div v-click-outside="closeDropdown">下拉菜单</div>
  </div>
</template>

// 真实案例：权限指令，控制按钮是否显示
app.directive('permission', {
  mounted(el, binding) {
    const requiredPerm = binding.value;              // 需要的权限码
    const userPerms = store.state.user.permissions;  // 当前用户权限
    if (!userPerms.includes(requiredPerm)) {
      // 无权限，直接从 DOM 中移除元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});

// 真实案例：点击外部关闭指令
app.directive('click-outside', {
  mounted(el, binding) {
    el.__clickOutside__ = (event) => {
      // 点击的不是元素本身、也不在其内部，则执行回调
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event);
      }
    };
    document.addEventListener('click', el.__clickOutside__);
  },
  unmounted(el) {
    // 卸载时移除监听，防止内存泄漏
    document.removeEventListener('click', el.__clickOutside__);
    delete el.__clickOutside__;
  }
});

<template>
  <div>
    <!-- 单向绑定 -->
    <p>{{ message }}</p>
    <p v-text="message"></p>
    <div v-html="htmlContent"></div>

    <!-- 属性绑定 -->
    <img :src="imageUrl" :alt="imageAlt">
    <a :href="linkUrl">Link</a>
    <div :class="{ active: isActive }">Class Binding</div>
    <div :style="{ color: textColor }">Style Binding</div>

    <!-- 动态绑定多个属性 -->
    <div v-bind="objectOfAttrs"></div>

    <!-- 双向绑定 -->
    <input v-model="username" placeholder="Username">
    <textarea v-model="description"></textarea>
    <select v-model="selectedOption">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>

    <!-- 复选框绑定数组 -->
    <input type="checkbox" value="a" v-model="checked">
    <input type="checkbox" value="b" v-model="checked">

    <!-- 单选框 -->
    <input type="radio" value="male" v-model="gender">
    <input type="radio" value="female" v-model="gender">

    <!-- 修饰符 -->
    <input v-model.lazy="username">
    <input v-model.number="age" type="number">
    <input v-model.trim="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      htmlContent: '<strong>Bold Text</strong>',
      imageUrl: '/image.jpg',
      imageAlt: 'Image',
      linkUrl: 'https://example.com',
      isActive: true,
      textColor: 'red',
      username: '',
      description: '',
      selectedOption: 'option1',
      checked: [],
      gender: 'male',
      age: 0,
      objectOfAttrs: {
        id: 'container',
        class: 'wrapper'
      }
    };
  }
};
</script>

<template>
  <div>
    <!-- 对象语法：布尔值决定类名 -->
    <div :class="{ active: isActive, 'text-danger': hasError }"></div>

    <!-- 数组语法：多个类 -->
    <div :class="[activeClass, errorClass]"></div>

    <!-- 数组中使用对象 -->
    <div :class="[isActive ? activeClass : '', errorClass]"></div>
    <div :class="[{ active: isActive }, errorClass]"></div>

    <!-- style 对象语法 -->
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

    <!-- style 数组语法：合并多个样式对象 -->
    <div :style="[baseStyles, overrideStyles]"></div>

    <!-- 自动添加浏览器前缀 -->
    <div :style="{ display: ['-webkit-box', 'flex'] }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false,
      activeClass: 'active',
      errorClass: 'text-danger',
      activeColor: 'red',
      fontSize: 16,
      baseStyles: { color: 'blue', margin: '10px' },
      overrideStyles: { color: 'green' }
    };
  }
};
</script>

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <p>Full Name (Computed): {{ fullNameComputed }}</p>

    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      fullName: ''
    };
  },

  computed: {
    // 计算属性：基于依赖自动缓存
    fullNameComputed() {
      console.log('Computed property called');
      return `${this.firstName} ${this.lastName}`;
    },

    // 只读计算属性
    fullNameReadOnly: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      }
    },

    // 可写计算属性
    fullNameWritable: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  },

  watch: {
    // 监听器：响应数据变化
    firstName(newVal, oldVal) {
      console.log(`First name changed from ${oldVal} to ${newVal}`);
      this.fullName = `${newVal} ${this.lastName}`;
    },

    lastName(newVal, oldVal) {
      console.log(`Last name changed from ${oldVal} to ${newVal}`);
      this.fullName = `${this.firstName} ${newVal}`;
    },

    // 深度监听
    user: {
      handler(newVal, oldVal) {
        console.log('User changed:', newVal);
      },
      deep: true
    },

    // 立即执行
    message: {
      handler(newVal) {
        console.log('Message:', newVal);
      },
      immediate: true
    }
  }
};
</script>

<!-- 这两种写法等价 -->
<input v-model="text" />
<input :value="text" @input="text = $event.target.value" />

<!-- 父组件使用 -->
<template>
  <div>
    <!-- 单个 v-model -->
    <CustomInput v-model="username" />

    <!-- 展开形式 -->
    <CustomInput
      :model-value="username"
      @update:model-value="username = $event"
    />

    <!-- 多个 v-model（Vue 3 新特性） -->
    <UserForm v-model:name="name" v-model:age="age" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
import UserForm from './UserForm.vue';

const username = ref('');
const name = ref('Tom');
const age = ref(20);
</script>

<!-- 子组件 CustomInput.vue：实现双向绑定 -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue']);
defineEmits(['update:modelValue']);
</script>

<!-- 子组件 UserForm.vue：多个 v-model -->
<template>
  <div>
    <input
      :value="name"
      @input="$emit('update:name', $event.target.value)"
    />
    <input
      type="number"
      :value="age"
      @input="$emit('update:age', Number($event.target.value))"
    />
  </div>
</template>

<script setup>
defineProps(['name', 'age']);
defineEmits(['update:name', 'update:age']);
</script>

<!-- 使用 defineModel（Vue 3.4+） -->
<template>
  <input v-model="model" />
</template>

<script setup>
// 一行搞定，model 既是响应式引用，修改它会自动触发 update 事件
const model = defineModel();
</script>

<!-- 自定义组件接收 v-model 修饰符 -->
<template>
  <input :value="modelValue" @input="onInput" />
</template>

<script setup>
const props = defineProps({
  modelValue: String,
  // 修饰符对象，如 v-model.capitalize 会得到 { capitalize: true }
  modelModifiers: { default: () => ({}) }
});
const emit = defineEmits(['update:modelValue']);

function onInput(e) {
  let value = e.target.value;
  // 应用自定义修饰符
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1);
  }
  emit('update:modelValue', value);
}
</script>

// 全局注册
Vue.component('my-component', {
  template: '<div>Global Component</div>'
});

// 局部注册
export default {
  components: {
    'my-component': MyComponent
  }
};

// 单文件组件
// MyComponent.vue
<template>
  <div>
    <h2>{{ title }}</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    }
  }
};
</script>

export default {
  props: {
    // 基础类型检查
    title: String,

    // 多种可能类型
    id: [String, Number],

    // 必填的字符串
    name: {
      type: String,
      required: true
    },

    // 带默认值的数字
    age: {
      type: Number,
      default: 18
    },

    // 对象/数组默认值必须用工厂函数
    config: {
      type: Object,
      default: () => ({ theme: 'light' })
    },

    tags: {
      type: Array,
      default: () => []
    },

    // 自定义校验器
    status: {
      type: String,
      validator(value) {
        return ['pending', 'success', 'error'].includes(value);
      }
    }
  }
};

<!-- 父组件 -->
<template>
  <div>
    <h1>Parent Component</h1>
    <p>Message from child: {{ childMessage }}</p>

    <!-- Props -->
    <ChildComponent
      :parent-message="parentMessage"
      @child-event="handleChildEvent"
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent',
      childMessage: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      this.childMessage = message;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h2>Child Component</h2>
    <p>Message from parent: {{ parentMessage }}</p>

    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  props: {
    parentMessage: {
      type: String,
      required: true
    }
  },
  methods: {
    sendMessage() {
      this.$emit('child-event', 'Hello from child');
    }
  }
};
</script>

<!-- provide/inject 示例 -->
<!-- 祖先组件 -->
<template>
  <div>
    <ParentComponent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      theme: 'dark',
      toggleTheme: this.toggleTheme
    };
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'dark' ? 'light' : 'dark';
    }
  }
};
</script>

<!-- 后代组件 -->
<template>
  <div :class="theme">
    <h2>Descendant Component</h2>
    <button @click="toggleTheme">Toggle Theme</button>
  </div>
</template>

<script>
export default {
  inject: ['theme', 'toggleTheme']
};
</script>

<!-- 子组件：defineProps + defineEmits -->
<template>
  <div>
    <p>{{ title }}</p>
    <button @click="notify">通知父组件</button>
  </div>
</template>

<script setup>
// 声明 props
const props = defineProps({
  title: { type: String, default: '默认标题' }
});

// 声明 emits
const emit = defineEmits(['submit', 'cancel']);

function notify() {
  emit('submit', { time: Date.now(), from: 'child' });
}

// 暴露方法/属性给父组件通过 ref 访问
defineExpose({
  reset() {
    console.log('子组件被父组件调用 reset');
  }
});
</script>

<!-- 父组件：通过 ref 访问子组件暴露的方法 -->
<template>
  <div>
    <ChildComponent ref="childRef" title="来自父级" @submit="onSubmit" />
    <button @click="callChild">调用子组件方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null);

function onSubmit(payload) {
  console.log('收到子组件提交', payload);
}

function callChild() {
  // 调用子组件通过 defineExpose 暴露的方法
  childRef.value.reset();
}
</script>

// provide / inject 的 Composition API 写法
// 祖先组件
import { provide, ref, readonly } from 'vue';

const theme = ref('dark');
function toggleTheme() {
  theme.value = theme.value === 'dark' ? 'light' : 'dark';
}
// 提供只读值 + 修改方法，防止后代直接篡改
provide('theme', readonly(theme));
provide('toggleTheme', toggleTheme);

// 后代组件
import { inject } from 'vue';
const theme = inject('theme');
const toggleTheme = inject('toggleTheme', () => {}); // 第二参为默认值

<!-- 基础插槽 -->
<!-- 父组件 -->
<template>
  <div>
    <MyComponent>
      <p>This is slot content</p>
    </MyComponent>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <h2>My Component</h2>
    <slot></slot>
  </div>
</template>

<!-- 命名插槽 -->
<!-- 父组件 -->
<template>
  <div>
    <MyComponent>
      <template v-slot:header>
        <h1>Header Content</h1>
      </template>

      <template #default>
        <p>Default Content</p>
      </template>

      <template #footer>
        <p>Footer Content</p>
      </template>
    </MyComponent>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 作用域插槽 -->
<!-- 父组件 -->
<template>
  <div>
    <MyComponent>
      <template #default="{ user, index }">
        <p>{{ index }}: {{ user.name }}</p>
      </template>
    </MyComponent>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot
      v-for="(user, index) in users"
      :user="user"
      :index="index"
    ></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'Alice' },
        { name: 'Bob' }
      ]
    };
  }
};
</script>

<!-- 子组件：插槽提供默认内容（父组件不填时展示） -->
<template>
  <button>
    <slot>提交</slot>
  </button>
</template>

<!-- 父组件：动态插槽名 -->
<template>
  <MyComponent>
    <template #[dynamicSlotName]>
      内容会插入到名为 dynamicSlotName 值的插槽
    </template>
  </MyComponent>
</template>

<script setup>
import { ref } from 'vue';
const dynamicSlotName = ref('header'); // 可动态切换为 'footer' 等
</script>

<!-- 子组件 DataTable.vue -->
<template>
  <table>
    <tbody>
      <tr v-for="(row, rowIndex) in data" :key="row.id">
        <td v-for="col in columns" :key="col.key">
          <!-- 把 row、col、rowIndex 传回给父组件 -->
          <slot
            :name="col.key"
            :row="row"
            :value="row[col.key]"
            :index="rowIndex"
          >
            <!-- 默认渲染：直接显示值 -->
            {{ row[col.key] }}
          </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
defineProps({
  columns: { type: Array, required: true },
  data: { type: Array, required: true }
});
</script>

<!-- 父组件：定制"状态"列和"操作"列 -->
<template>
  <DataTable :columns="columns" :data="users">
    <!-- 状态列：根据值显示不同标签 -->
    <template #status="{ value }">
      <span :class="value === 'active' ? 'tag-green' : 'tag-red'">
        {{ value === 'active' ? '启用' : '禁用' }}
      </span>
    </template>

    <!-- 操作列：放按钮，可访问整行数据 -->
    <template #actions="{ row }">
      <button @click="edit(row)">编辑</button>
      <button @click="remove(row.id)">删除</button>
    </template>
  </DataTable>
</template>

<script setup>
import { ref } from 'vue';
import DataTable from './DataTable.vue';

const columns = [
  { key: 'name', title: '姓名' },
  { key: 'status', title: '状态' },
  { key: 'actions', title: '操作' }
];
const users = ref([
  { id: 1, name: 'Alice', status: 'active' },
  { id: 2, name: 'Bob', status: 'inactive' }
]);

function edit(row) { console.log('编辑', row); }
function remove(id) { console.log('删除', id); }
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },

  beforeCreate() {
    console.log('beforeCreate: 实例创建前');
    // 无法访问 data、methods、computed
  },

  created() {
    console.log('created: 实例创建后');
    // 可以访问 data、methods、computed
    // 常用于初始化数据、发起网络请求
    this.fetchData();
  },

  beforeMount() {
    console.log('beforeMount: 挂载前');
    // DOM 还未渲染
  },

  mounted() {
    console.log('mounted: 挂载后');
    // DOM 已渲染
    // 常用于操作 DOM、初始化第三方库
    this.initChart();
  },

  beforeUpdate() {
    console.log('beforeUpdate: 更新前');
    // 数据变化，DOM 还未更新
  },

  updated() {
    console.log('updated: 更新后');
    // DOM 已更新
    // 避免在这里修改数据，可能导致无限循环
  },

  beforeDestroy() {
    console.log('beforeDestroy: 销毁前');
    // 清理定时器、事件监听器等
    this.cleanup();
  },

  destroyed() {
    console.log('destroyed: 销毁后');
    // 实例已销毁
  },

  methods: {
    increment() {
      this.count++;
    },

    fetchData() {
      // 发起网络请求
      fetch('/api/data')
        .then(response => response.json())
        .then(data => {
          this.data = data;
        });
    },

    initChart() {
      // 初始化图表
      this.chart = new Chart(this.$refs.chart, {
        // 配置项
      });
    },

    cleanup() {
      // 清理定时器
      if (this.timer) {
        clearInterval(this.timer);
      }

      // 清理图表
      if (this.chart) {
        this.chart.destroy();
      }
    }
  }
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    let timer = null;

    // 挂载前
    onBeforeMount(() => {
      console.log('onBeforeMount: 挂载前');
    });

    // 挂载后
    onMounted(() => {
      console.log('onMounted: 挂载后');
      // 初始化定时器
      timer = setInterval(() => {
        console.log('Timer tick');
      }, 1000);
    });

    // 更新前
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate: 更新前');
    });

    // 更新后
    onUpdated(() => {
      console.log('onUpdated: 更新后');
    });

    // 卸载前
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount: 卸载前');
    });

    // 卸载后
    onUnmounted(() => {
      console.log('onUnmounted: 卸载后');
      // 清理定时器
      if (timer) {
        clearInterval(timer);
      }
    });

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

<template>
  <div ref="chartRef" class="chart"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  data: { type: Array, required: true }
});

const chartRef = ref(null);
let chartInstance = null;

function resizeHandler() {
  chartInstance && chartInstance.resize();
}

onMounted(() => {
  // 挂载后 DOM 可用，初始化图表
  chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption(buildOption(props.data));
  // 监听窗口变化
  window.addEventListener('resize', resizeHandler);
});

// 数据变化时更新图表（不重建实例）
watch(
  () => props.data,
  (newData) => {
    chartInstance && chartInstance.setOption(buildOption(newData));
  },
  { deep: true }
);

onBeforeUnmount(() => {
  // 关键清理：移除监听、销毁实例，防止内存泄漏
  window.removeEventListener('resize', resizeHandler);
  chartInstance && chartInstance.dispose();
  chartInstance = null;
});

function buildOption(data) {
  return {
    xAxis: { type: 'category', data: data.map(d => d.label) },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: data.map(d => d.value) }]
  };
}
</script>

<template>
  <keep-alive>
    <component :is="currentView" />
  </keep-alive>
</template>

<script setup>
import { onActivated, onDeactivated } from 'vue';

// 被缓存的组件在"激活"时触发，而非重新挂载
onActivated(() => {
  console.log('组件被激活，可刷新数据');
});

// 被缓存的组件"失活"时触发，而非卸载
onDeactivated(() => {
  console.log('组件失活，可暂停轮询');
});
</script>

// 虚拟 DOM 就是普通 JS 对象
const vnode = {
  tag: 'div',
  props: { id: 'app', class: 'container' },
  children: [
    { tag: 'h1', props: {}, children: 'Hello' },
    { tag: 'p', props: {}, children: 'World' }
  ]
};

// 渲染函数 h() 生成 vnode
import { h } from 'vue';
const vnode2 = h('div', { id: 'app' }, [
  h('h1', 'Hello'),
  h('p', 'World')
]);

// 简化的 Diff：同层比较 + key 复用
function patch(oldVnode, newVnode) {
  // 1. 标签不同，直接替换
  if (oldVnode.tag !== newVnode.tag) {
    replaceNode(oldVnode, newVnode);
    return;
  }
  // 2. 标签相同，复用元素，更新属性
  const el = (newVnode.el = oldVnode.el);
  updateProps(el, oldVnode.props, newVnode.props);
  // 3. 对比子节点
  updateChildren(el, oldVnode.children, newVnode.children);
}

// 更新属性：新增/修改/删除
function updateProps(el, oldProps = {}, newProps = {}) {
  // 设置新属性
  for (const key in newProps) {
    if (oldProps[key] !== newProps[key]) {
      el.setAttribute(key, newProps[key]);
    }
  }
  // 删除旧属性
  for (const key in oldProps) {
    if (!(key in newProps)) {
      el.removeAttribute(key);
    }
  }
}

<!-- ❌ 反例：用 index 作为 key，插入/删除会错乱 -->
<li v-for="(item, index) in list" :key="index">
  <input /> {{ item.name }}
</li>

<!-- ✅ 正例：用唯一稳定的 id 作为 key -->
<li v-for="item in list" :key="item.id">
  <input /> {{ item.name }}
</li>

import { ref, nextTick } from 'vue';

const count = ref(0);

async function update() {
  count.value = 1;
  count.value = 2;
  count.value = 3;
  // 此时 DOM 还是旧的（0），因为更新是异步批量的
  console.log('同步读取 DOM，仍是旧值');

  // 等待 DOM 更新完成
  await nextTick();
  console.log('DOM 已更新为 3');
  // 现在可以安全地读取/操作最新 DOM
}

// 回调写法
function updateWithCallback() {
  count.value++;
  nextTick(() => {
    console.log('DOM 更新后执行');
  });
}

// 简化的异步更新队列实现
const queue = [];
let isFlushing = false;
const p = Promise.resolve();

function nextTick(fn) {
  return fn ? p.then(fn) : p;
}

function queueJob(job) {
  // 去重：同一个 job 不重复入队
  if (!queue.includes(job)) {
    queue.push(job);
  }
  if (!isFlushing) {
    isFlushing = true;
    // 在微任务中批量执行
    p.then(flushJobs);
  }
}

function flushJobs() {
  // 按 id 排序，保证父组件先于子组件更新
  queue.sort((a, b) => a.id - b.id);
  for (const job of queue) {
    job();
  }
  queue.length = 0;
  isFlushing = false;
}

import { ref, nextTick } from 'vue';

const listRef = ref(null);
const messages = ref([]);

async function addMessage(msg) {
  messages.value.push(msg);
  // 直接读取会得到旧高度
  await nextTick();
  // DOM 已更新，滚动到底部
  const el = listRef.value;
  el.scrollTop = el.scrollHeight;
}

<template>
  <div>
    <!-- .stop：阻止事件冒泡 -->
    <div @click="onOuter">
      <button @click.stop="onInner">点我不冒泡</button>
    </div>

    <!-- .prevent：阻止默认行为 -->
    <form @submit.prevent="onSubmit">
      <button type="submit">提交</button>
    </form>

    <!-- .self：只有点击元素自身才触发 -->
    <div @click.self="onSelf">只有点空白处才触发</div>

    <!-- .once：只触发一次 -->
    <button @click.once="onOnce">只生效一次</button>

    <!-- .capture：使用捕获模式 -->
    <div @click.capture="onCapture">捕获阶段触发</div>

    <!-- .passive：提升滚动性能（不会调用 preventDefault） -->
    <div @scroll.passive="onScroll">滚动区域</div>

    <!-- 修饰符可串联 -->
    <a href="#" @click.stop.prevent="onLink">串联修饰符</a>

    <!-- 按键修饰符 -->
    <input @keyup.enter="onEnter" placeholder="回车提交" />
    <input @keyup.esc="onEsc" placeholder="Esc 取消" />
    <input @keyup.ctrl.s="onSave" placeholder="Ctrl+S 保存" />

    <!-- 鼠标按键修饰符 -->
    <button @click.right="onRightClick">右键</button>
    <button @click.middle="onMiddleClick">中键</button>

    <!-- 精确修饰符：仅按下指定键才触发 -->
    <button @click.exact="onExact">没有其他修饰键才触发</button>
  </div>
</template>

<script setup>
function onOuter() { console.log('外层'); }
function onInner() { console.log('内层，不冒泡'); }
function onSubmit() { console.log('提交，已阻止刷新'); }
function onSelf() { console.log('自身'); }
function onOnce() { console.log('只一次'); }
function onCapture() { console.log('捕获'); }
function onScroll() { console.log('滚动'); }
function onLink() { console.log('链接，阻止跳转和冒泡'); }
function onEnter() { console.log('回车'); }
function onEsc() { console.log('Esc'); }
function onSave() { console.log('保存'); }
function onRightClick() { console.log('右键'); }
function onMiddleClick() { console.log('中键'); }
function onExact() { console.log('精确匹配'); }
</script>

<template>
  <!-- 点击遮罩本身关闭，点击内部对话框不关闭 -->
  <div class="mask" @click.self="close">
    <div class="dialog">
      <h3>标题</h3>
      <p>对话框内容，点这里不会关闭</p>
      <button @click="close">关闭</button>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['close']);
function close() {
  emit('close');
}
</script>

<script setup>
import { ref, computed } from 'vue';

const isActive = ref(true);
const hasError = ref(false);
const type = ref('primary');
</script>

<template>
  <!-- 对象语法：键是类名，值是布尔，为 true 才添加 -->
  <div :class="{ active: isActive, 'text-danger': hasError }">对象语法</div>

  <!-- 数组语法：数组元素是类名 -->
  <div :class="[isActive ? 'active' : '', 'base-class']">数组语法</div>

  <!-- 数组中嵌套对象（组合用法） -->
  <div :class="['base', { active: isActive, disabled: hasError }]">组合语法</div>

  <!-- 与静态 class 共存：最终会合并 -->
  <div class="static-class" :class="{ active: isActive }">合并 class</div>
</template>

<script setup>
import { ref, computed } from 'vue';

const status = ref('success');
const size = ref('large');

const classes = computed(() => ({
  'btn': true,
  [`btn-${status.value}`]: true,   // 动态类名
  [`btn-${size.value}`]: true,
  'btn-disabled': status.value === 'loading'
}));
</script>

<template>
  <button :class="classes">按钮</button>
</template>

<script setup>
import { ref } from 'vue';

const color = ref('red');
const fontSize = ref(16);
const styleObject = ref({ color: 'blue', fontWeight: 'bold' });
</script>

<template>
  <!-- 对象语法：CSS 属性用驼峰或短横线（需引号） -->
  <div :style="{ color: color, fontSize: fontSize + 'px' }">对象语法</div>

  <!-- 直接绑定样式对象 -->
  <div :style="styleObject">绑定对象</div>

  <!-- 数组语法：合并多个样式对象 -->
  <div :style="[styleObject, { textDecoration: 'underline' }]">数组语法</div>
</template>

<script setup>
import { ref } from 'vue';
const role = ref('admin');
const visible = ref(true);
</script>

<template>
  <!-- v-if 系列：条件为假时元素根本不渲染（不在 DOM 里） -->
  <div v-if="role === 'admin'">管理员面板</div>
  <div v-else-if="role === 'editor'">编辑面板</div>
  <div v-else>访客面板</div>

  <!-- v-show：始终渲染，只是切换 display:none -->
  <div v-show="visible">通过 display 控制显隐</div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, name: '苹果', price: 5 },
  { id: 2, name: '香蕉', price: 3 }
]);

const obj = ref({ name: '张三', age: 25, city: '北京' });
</script>

<template>
  <!-- 遍历数组，第二参数是索引 -->
  <li v-for="(item, index) in list" :key="item.id">
    {{ index + 1 }}. {{ item.name }} - ￥{{ item.price }}
  </li>

  <!-- 遍历对象：值、键、索引 -->
  <li v-for="(value, key, index) in obj" :key="key">
    {{ index }}. {{ key }}: {{ value }}
  </li>

  <!-- 遍历数字：1 到 5 -->
  <span v-for="n in 5" :key="n">{{ n }} </span>

  <!-- 用 template 包裹渲染多个元素而不产生额外 DOM -->
  <template v-for="item in list" :key="item.id">
    <dt>{{ item.name }}</dt>
    <dd>￥{{ item.price }}</dd>
  </template>
</template>

<!-- 错误示范：用 index 做 key -->
<li v-for="(item, index) in list" :key="index">
  <input type="checkbox" /> {{ item.name }}
</li>

<!-- 错误：v-if 在 v-for 中，每次遍历都要判断，且 Vue3 中 v-if 优先级更高会报错 -->
<li v-for="item in list" v-if="item.active" :key="item.id">{{ item.name }}</li>

<script setup>
import { computed, ref } from 'vue';
const list = ref([]);
// 正确：用 computed 预先过滤
const activeList = computed(() => list.value.filter((item) => item.active));
</script>

<template>
  <li v-for="item in activeList" :key="item.id">{{ item.name }}</li>
</template>

<script setup>
import { ref, shallowRef } from 'vue';
import TabHome from './TabHome.vue';
import TabProfile from './TabProfile.vue';
import TabSettings from './TabSettings.vue';

const tabs = {
  home: TabHome,
  profile: TabProfile,
  settings: TabSettings
};

// 用 shallowRef 存组件，避免不必要的深层响应式（组件对象无需响应式）
const currentTab = ref('home');
const currentComponent = shallowRef(TabHome);

function switchTab(name) {
  currentTab.value = name;
  currentComponent.value = tabs[name];
}
</script>

<template>
  <nav>
    <button v-for="(_, name) in tabs" :key="name" @click="switchTab(name)"
            :class="{ active: currentTab === name }">
      {{ name }}
    </button>
  </nav>

  <!-- :is 可以是组件对象，也可以是组件名字符串 -->
  <component :is="currentComponent" />
</template>

<template>
  <!-- include/exclude 控制哪些组件被缓存，max 限制最大缓存数 -->
  <KeepAlive :include="['TabHome', 'TabProfile']" :max="10">
    <component :is="currentComponent" />
  </KeepAlive>
</template>

<script setup>
import { onActivated, onDeactivated } from 'vue';

onActivated(() => {
  console.log('组件被激活（从缓存中显示）');
  // 可在此刷新数据
});

onDeactivated(() => {
  console.log('组件被停用（进入缓存）');
  // 可在此暂停定时器
});
</script>

import { defineAsyncComponent } from 'vue';
import LoadingComponent from './Loading.vue';
import ErrorComponent from './Error.vue';

// 简单写法
const AsyncModal = defineAsyncComponent(() => import('./HeavyModal.vue'));

// 完整配置写法
const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: LoadingComponent,   // 加载中显示
  errorComponent: ErrorComponent,       // 加载失败显示
  delay: 200,                           // 延迟 200ms 才显示 loading（避免闪烁）
  timeout: 10000                        // 超过 10s 视为失败
});

<!-- 子组件 AsyncData.vue：setup 里直接 await -->
<script setup>
const data = await fetch('/api/data').then((r) => r.json());
</script>

<template>
  <div>{{ data.title }}</div>
</template>

<!-- 父组件用 Suspense 包裹 -->
<template>
  <Suspense>
    <!-- 默认插槽：异步组件加载完成后显示 -->
    <template #default>
      <AsyncData />
    </template>
    <!-- fallback 插槽：加载中显示 -->
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>

<template>
  <button @click="showModal = true">打开弹窗</button>

  <!-- 无论这段代码写在多深的组件里，弹窗 DOM 都渲染到 body 下 -->
  <Teleport to="body">
    <div v-if="showModal" class="modal-overlay">
      <div class="modal">
        <h3>弹窗标题</h3>
        <p>Teleport 让弹窗脱离父级层叠上下文</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(true);
</script>

<template>
  <button @click="show = !show">切换</button>

  <Transition name="fade">
    <p v-if="show">淡入淡出的内容</p>
  </Transition>
</template>

<style>
/* 进入的起点、离开的终点 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
/* 过渡过程 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
</style>

<script setup>
import { ref } from 'vue';
const items = ref([1, 2, 3, 4, 5]);

function shuffle() {
  items.value = items.value.sort(() => Math.random() - 0.5);
}
function remove(item) {
  items.value = items.value.filter((i) => i !== item);
}
</script>

<template>
  <button @click="shuffle">打乱</button>
  <!-- tag 指定渲染的容器标签 -->
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item" @click="remove(item)">
      {{ item }}
    </li>
  </TransitionGroup>
</template>

<style>
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
  transition: all 0.4s ease;
}
/* move 类让排序时其他元素平滑移动（FLIP 动画） */
.list-move {
  transition: transform 0.4s ease;
}
</style>

<script setup>
import { ref, reactive, watch } from 'vue';

const count = ref(0);
const user = reactive({ name: '张三', address: { city: '北京' } });

// 侦听单个 ref
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} → ${newVal}`);
});

// 侦听 getter 函数（侦听 reactive 的某个属性）
watch(
  () => user.name,
  (newName) => console.log('名字变了:', newName)
);

// 侦听多个源（数组），回调参数也是数组
watch([count, () => user.name], ([newCount, newName], [oldCount, oldName]) => {
  console.log('count 或 name 变化了');
});

// 侦听整个 reactive 对象（自动深度侦听）
watch(user, (newUser) => {
  console.log('user 内部任何变化都触发');
});
</script>

<script setup>
import { ref, watch } from 'vue';

const obj = ref({ nested: { value: 1 } });

watch(obj, (val) => {
  console.log('深度变化');
}, {
  deep: true,        // 深度侦听：内部嵌套属性变化也触发
  immediate: true,   // 立即执行：创建时先跑一次回调
  once: true,        // 只执行一次（Vue 3.4+）
  flush: 'post'      // 回调时机：'pre'(默认,DOM更新前) | 'post'(DOM更新后) | 'sync'(同步)
});
</script>

<script setup>
import { ref, watchEffect } from 'vue';

const url = ref('/api/user/1');
const data = ref(null);

// 无需指定依赖，回调里用到的响应式数据自动被追踪
watchEffect(async () => {
  // url.value 被自动收集为依赖，url 变化就重新执行
  const res = await fetch(url.value);
  data.value = await res.json();
});
</script>

<script setup>
import { ref, watchEffect } from 'vue';
const id = ref(1);

watchEffect((onCleanup) => {
  const controller = new AbortController();
  fetch(`/api/data/${id.value}`, { signal: controller.signal });

  // onCleanup 在下次执行前或停止侦听时调用
  onCleanup(() => {
    controller.abort(); // 取消上一次未完成的请求，避免竞态
  });
});
</script>

import { h } from 'vue';

// h(标签/组件, 属性对象, 子节点)
export default {
  setup() {
    return () => h('div', { class: 'container' }, [
      h('h1', { style: { color: 'red' } }, '标题'),
      h('p', null, '段落内容'),
      h('button', { onClick: () => alert('点击') }, '按钮')
    ]);
  }
};

import { h } from 'vue';

export default {
  props: { level: { type: Number, required: true } },
  setup(props, { slots }) {
    // 根据 level 动态决定标签名
    return () => h(
      `h${props.level}`,        // 'h1' ~ 'h6'
      {},
      slots.default?.()          // 渲染默认插槽内容
    );
  }
};

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return () => (
      <div class="counter">
        <span>计数：{count.value}</span>
        <button onClick={() => count.value++}>加一</button>
      </div>
    );
  }
};

<script setup>
// 逻辑：编译时会转换成标准的 setup 函数
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <!-- 结构：编译成渲染函数 -->
  <button @click="count++">{{ count }}</button>
</template>

<style scoped>
/* 样式：scoped 让样式只作用于当前组件 */
button { color: blue; }
</style>

// 模板 <div id="app">{{ msg }}</div> 大致编译为：
import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from 'vue';

function render(_ctx) {
  return (_openBlock(), _createElementBlock('div', { id: 'app' },
    _toDisplayString(_ctx.msg),
    1 /* PatchFlag: TEXT，标记只有文本会变 */
  ));
}

<!-- 选项式 API（Options API）：按选项类型组织 -->
<script>
export default {
  data() {
    return { count: 0, message: 'Hello' };
  },
  computed: {
    double() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  mounted() {
    console.log('组件挂载');
  }
};
</script>

<!-- 组合式 API（Composition API）：按逻辑关注点组织 -->
<script setup>
import { ref, computed, onMounted } from 'vue';

const count = ref(0);
const message = ref('Hello');
const double = computed(() => count.value * 2);

function increment() {
  count.value++;
}

onMounted(() => {
  console.log('组件挂载');
});
</script>

// 选项式的 mixin 方案（不推荐，有隐患）
const mouseMixin = {
  data() {
    return { x: 0, y: 0 };
  },
  mounted() {
    window.addEventListener('mousemove', this.update);
  },
  methods: {
    update(e) {
      this.x = e.pageX;
      this.y = e.pageY;
    }
  }
};
// 问题：多个 mixin 的 data/methods 可能命名冲突，且组件里看不出 x/y 来自哪个 mixin

// 组合式的 composable 方案（推荐）
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(e) {
    x.value = e.pageX;
    y.value = e.pageY;
  }

  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));

  return { x, y };
}

// 使用：来源清晰，可重命名避免冲突
// const { x, y } = useMouse();
// const { x: mouseX } = useMouse(); // 想重命名随意