Vue 面试高频知识点详解

// Vue2 响应式核心：defineReactive
function defineReactive(obj, key, val) {
  // 每个属性对应一个 Dep，用于收集依赖该属性的 Watcher
  const dep = new Dep();

  // 递归处理嵌套对象
  observe(val);

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      // 依赖收集：Dep.target 是当前正在求值的 Watcher
      if (Dep.target) {
        dep.depend();
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      // 新赋的值如果是对象，也要变成响应式
      observe(newVal);
      // 派发更新：通知所有订阅者
      dep.notify();
    }
  });
}

// Dep：依赖收集器
class Dep {
  constructor() {
    this.subs = [];
  }
  depend() {
    if (Dep.target) {
      this.subs.push(Dep.target);
    }
  }
  notify() {
    this.subs.forEach(watcher => watcher.update());
  }
}
Dep.target = null;

// Vue2 数组响应式：重写原型方法
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
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__;
      // 新增元素也要变成响应式
      let inserted;
      if (method === 'push' || method === 'unshift') inserted = args;
      else if (method === 'splice') inserted = args.slice(2);
      if (inserted) ob.observeArray(inserted);
      // 手动派发更新
      ob.dep.notify();
      return result;
    }
  });
});

// Vue3 响应式核心：reactive + track + trigger
const targetMap = new WeakMap();
let activeEffect = null;

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 hadKey = Object.prototype.hasOwnProperty.call(target, key);
      const result = Reflect.deleteProperty(target, key);
      if (hadKey) trigger(target, key);
      return result;
    }
  });
}

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());
}

// Vue3 生命周期使用示例
import {
  onBeforeMount, onMounted,
  onBeforeUpdate, onUpdated,
  onBeforeUnmount, onUnmounted,
  ref
} from 'vue';

export default {
  setup() {
    // setup 相当于 beforeCreate + created
    const timer = ref(null);

    onBeforeMount(() => {
      console.log('挂载前：DOM 还未生成');
    });

    onMounted(() => {
      console.log('挂载后：可以操作真实 DOM');
      // 初始化定时器
      timer.value = setInterval(() => {
        console.log('tick');
      }, 1000);
    });

    onBeforeUpdate(() => {
      console.log('更新前：可获取旧 DOM');
    });

    onUpdated(() => {
      console.log('更新后：DOM 已刷新');
    });

    onBeforeUnmount(() => {
      // 清理副作用，防止内存泄漏
      clearInterval(timer.value);
    });

    onUnmounted(() => {
      console.log('卸载后：组件已销毁');
    });

    return {};
  }
};

// 挂载阶段（由外到内创建，由内到外挂载）
// 父 beforeCreate -> 父 created -> 父 beforeMount
//   -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted
// -> 父 mounted

// 更新阶段
// 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

// 销毁阶段
// 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

<template>
  <div>
    <!-- 频繁切换（如 Tab 切换），使用 v-show 避免反复销毁重建 -->
    <div v-show="activeTab === 'home'">首页内容</div>

    <!-- 不常切换、且渲染成本高，使用 v-if 节省初始开销 -->
    <heavy-chart v-if="showChart" :data="chartData" />

    <!-- v-if / v-else-if / v-else 条件链 -->
    <div v-if="status === 'loading'">加载中...</div>
    <div v-else-if="status === 'error'">加载失败</div>
    <div v-else>加载完成</div>
  </div>
</template>

// 虚拟 DOM 就是一个描述节点的 JS 对象（VNode）
const vnode = {
  tag: 'div',
  props: { id: 'app', class: 'container' },
  children: [
    { tag: 'h1', props: {}, children: ['标题'] },
    { tag: 'p', props: {}, children: ['内容'] }
  ]
};

// 对应真实 DOM
// <div id="app" class="container">
//   <h1>标题</h1>
//   <p>内容</p>
// </div>

<!-- 父组件 -->
<template>
  <ChildComponent
    :message="parentMessage"
    @child-event="handleEvent"
  />
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const parentMessage = ref('来自父组件');
const handleEvent = (payload) => {
  console.log('收到子组件事件：', payload);
};
</script>

<!-- 子组件（Vue3 script setup 写法） -->
<script setup>
const props = defineProps({
  message: { type: String, default: '' }
});
const emit = defineEmits(['child-event']);
const sendMessage = () => {
  emit('child-event', 'Hello from child');
};
</script>

// 祖先组件提供数据（Vue3）
import { provide, ref, readonly } from 'vue';
export default {
  setup() {
    const theme = ref('light');
    const updateTheme = (val) => { theme.value = val; };
    // 用 readonly 防止后代直接修改，保持单向数据流
    provide('theme', readonly(theme));
    provide('updateTheme', updateTheme);
  }
};

// 后代组件注入数据
import { inject } from 'vue';
export default {
  setup() {
    const theme = inject('theme', 'light'); // 第二个参数为默认值
    const updateTheme = inject('updateTheme');
    return { theme, updateTheme };
  }
};

<script setup>
import { ref, onMounted } from 'vue';
const childRef = ref(null);
onMounted(() => {
  // 调用子组件暴露的方法
  childRef.value.doSomething();
});
</script>
<template>
  <Child ref="childRef" />
</template>

<!-- 子组件需用 defineExpose 暴露 -->
<script setup>
const doSomething = () => console.log('子组件方法被调用');
defineExpose({ doSomething });
</script>

// Vue3 中 $on/$off/$emit 被移除，改用 mitt 库
import mitt from 'mitt';
export const emitter = mitt();

// 组件 A 发送
emitter.emit('custom-event', { data: 123 });

// 组件 B 监听（记得在卸载时 off，避免内存泄漏）
import { onMounted, onUnmounted } from 'vue';
const handler = (payload) => console.log(payload);
onMounted(() => emitter.on('custom-event', handler));
onUnmounted(() => emitter.off('custom-event', handler));

import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state: () => ({ user: null, token: '' }),
  actions: {
    login(userData) { this.user = userData; }
  }
});
// 任意组件中使用
const userStore = useUserStore();
userStore.login(userData);

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

const props = defineProps({
  title: { type: String, required: true, default: '默认标题' },
  count: { type: Number, default: 0 }
});

// 错误：直接修改 props 会警告
// props.count++;

// 正确方式一：用 props 初始化本地 data
const localCount = ref(props.count);

// 正确方式二：用 computed 派生
const displayTitle = computed(() => props.title.toUpperCase());

// 正确方式三：需要修改则 emit 通知父组件
const emit = defineEmits(['update:count']);
const increment = () => emit('update:count', props.count + 1);
</script>

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

const firstName = ref('John');
const lastName = ref('Doe');
const searchKey = ref('');

// computed：有缓存，firstName/lastName 不变则不重新计算
const fullName = computed(() => firstName.value + ' ' + lastName.value);

// 可写 computed
const fullNameWritable = computed({
  get: () => firstName.value + ' ' + lastName.value,
  set: (val) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

// watch：监听搜索词，做防抖异步请求
let timer = null;
watch(searchKey, (newVal, oldVal) => {
  clearTimeout(timer);
  timer = setTimeout(async () => {
    const res = await fetch('/api/search?q=' + newVal);
    const data = await res.json();
    console.log(data);
  }, 300);
});

// 深度监听对象
const form = ref({ name: '', age: 0 });
watch(form, (val) => {
  console.log('表单变化', val);
}, { deep: true, immediate: true });
</script>

<!-- Options API：逻辑按选项分散 -->
<script>
export default {
  data() {
    return { count: 0, user: null };
  },
  computed: {
    doubleCount() { return this.count * 2; }
  },
  methods: {
    increment() { this.count++; }
  },
  async mounted() {
    this.user = await this.fetchUser();
  }
};
</script>

<!-- Composition API：逻辑按功能聚合 -->
<script setup>
import { ref, computed, onMounted } from 'vue';

// 计数功能内聚在一起
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const increment = () => count.value++;

// 用户功能内聚在一起
const user = ref(null);
onMounted(async () => {
  user.value = await fetchUser();
});
</script>

// composable：清晰的输入输出，无命名冲突
// useCounter.js
import { ref } from 'vue';
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  return { count, increment, decrement };
}

// 组件中使用，明确知道 count 来自哪里
import { useCounter } from './useCounter';
const { count, increment } = useCounter(10);

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

// ref：基本类型
const count = ref(0);
count.value++; // 需要 .value

// reactive：对象
const state = reactive({ count: 0, user: { name: 'Alice' } });
state.count++;
state.user.name = 'Bob';

// 问题：解构 reactive 会丢失响应式
const { count: c } = state; // c 是普通值，不再响应式

// 解决：toRefs 把每个属性转成 ref，保持响应式
const { count: c2, user } = toRefs(state);
c2.value++; // 修改会同步回 state.count

// toRef：单个属性转 ref，且与源保持联动
const countRef = toRef(state, 'count');
countRef.value++; // 会改变 state.count

function useFeature() {
  const state = reactive({ loading: false, data: null });
  // 返回时用 toRefs，让调用方可以解构而不丢响应式
  return { ...toRefs(state) };
}
// 调用方
const { loading, data } = useFeature(); // 仍是响应式的 ref

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

const name = ref('');
const age = ref(0);

// watch：精确监听，能拿到旧值
watch(name, (newVal, oldVal) => {
  console.log(`name 从 ${oldVal} 变为 ${newVal}`);
});

// watch 监听多个源
watch([name, age], ([newName, newAge], [oldName, oldAge]) => {
  console.log('name 或 age 变化了');
});

// watchEffect：自动收集依赖，立即执行
watchEffect(() => {
  // 用到了 name 和 age，两者任一变化都会重新执行
  console.log(`当前用户：${name.value}，年龄：${age.value}`);
});

// 停止侦听
const stop = watchEffect(() => { /* ... */ });
stop();

import { ref, nextTick } from 'vue';

const count = ref(0);
const el = ref(null);

const update = async () => {
  count.value = 100;
  // 此时 DOM 还未更新，读取的是旧值
  console.log(el.value.textContent); // 0

  // 方式一：await nextTick
  await nextTick();
  console.log(el.value.textContent); // 100

  // 方式二：回调形式
  nextTick(() => {
    console.log(el.value.textContent); // 100
  });
};

const queue = [];
let waiting = false;
const callbacks = [];

function nextTick(cb) {
  callbacks.push(cb);
  if (!waiting) {
    waiting = true;
    Promise.resolve().then(flushCallbacks);
  }
}

function flushCallbacks() {
  waiting = false;
  const copies = callbacks.slice();
  callbacks.length = 0;
  copies.forEach(cb => cb());
}

<template>
  <!-- 错误：用 index 作 key，列表增删会导致状态错乱 -->
  <div v-for="(item, index) in list" :key="index">
    <input v-model="item.value" />
  </div>

  <!-- 正确：用唯一且稳定的 id -->
  <div v-for="item in list" :key="item.id">
    <input v-model="item.value" />
  </div>
</template>

// Vue3 快速 diff 的核心思路（简化）
function patchKeyedChildren(oldChildren, newChildren) {
  // 1. 从头部开始比较相同节点
  let i = 0;
  let e1 = oldChildren.length - 1;
  let e2 = newChildren.length - 1;
  while (i <= e1 && i <= e2 && isSameVNode(oldChildren[i], newChildren[i])) {
    patch(oldChildren[i], newChildren[i]);
    i++;
  }
  // 2. 从尾部开始比较相同节点
  while (i <= e1 && i <= e2 && isSameVNode(oldChildren[e1], newChildren[e2])) {
    patch(oldChildren[e1], newChildren[e2]);
    e1--;
    e2--;
  }
  // 3. 处理新增、删除
  // 4. 中间乱序部分：建立 key -> index 映射，
  //    计算最长递增子序列（LIS），只移动不在 LIS 中的节点，最小化 DOM 移动
}

function isSameVNode(n1, n2) {
  return n1.type === n2.type && n1.key === n2.key;
}

// 编译前模板
// <div>
//   <span>静态文本</span>
//   <span>{{ dynamic }}</span>
// </div>

// 编译后（简化）：静态节点被提升到外部只创建一次
const _hoisted_1 = createVNode('span', null, '静态文本');
function render() {
  return createVNode('div', null, [
    _hoisted_1, // 复用提升的静态节点
    createVNode('span', null, dynamic, 1 /* TEXT PatchFlag */)
  ]);
}

// PatchFlag 枚举（部分）
const PatchFlags = {
  TEXT: 1,        // 动态文本
  CLASS: 2,       // 动态 class
  STYLE: 4,       // 动态 style
  PROPS: 8,       // 动态 props
  FULL_PROPS: 16, // 有动态 key 的 props
  HYDRATE_EVENTS: 32,
  STABLE_FRAGMENT: 64
};
// createVNode('div', { class: cls }, text, 3 /* TEXT | CLASS */)
// 表示这个节点只有 text 和 class 是动态的，其他跳过比对

<!-- 原生元素上 v-model 等价于 -->
<input v-model="text" />
<!-- 等价于 -->
<input :value="text" @input="text = $event.target.value" />

<!-- Vue3 组件上 v-model 等价于 -->
<CustomInput v-model="text" />
<!-- 等价于 -->
<CustomInput
  :modelValue="text"
  @update:modelValue="text = $event"
/>

<!-- Vue3 支持多个 v-model（带参数） -->
<UserForm
  v-model:name="userName"
  v-model:age="userAge"
/>

<!-- 子组件实现 -->
<script setup>
defineProps(['name', 'age']);
const emit = defineEmits(['update:name', 'update:age']);
const updateName = (val) => emit('update:name', val);
const updateAge = (val) => emit('update:age', val);
</script>

<!-- Vue2 的 .sync 写法（Vue3 已移除） -->
<CustomComp :title.sync="pageTitle" />
<!-- 等价于 -->
<CustomComp
  :title="pageTitle"
  @update:title="pageTitle = $event"
/>

<!-- 子组件：定义插槽 -->
<template>
  <div class="card">
    <header>
      <slot name="header">默认标题</slot>
    </header>
    <main>
      <slot>默认内容</slot>
    </main>
    <!-- 作用域插槽：把 item 数据暴露给父组件 -->
    <ul>
      <li v-for="item in list" :key="item.id">
        <slot name="item" :item="item" :index="item.id">
          {{ item.name }}
        </slot>
      </li>
    </ul>
  </div>
</template>

<!-- 父组件：填充插槽 -->
<template>
  <Card>
    <!-- 具名插槽 -->
    <template #header>
      <h2>自定义标题</h2>
    </template>

    <!-- 默认插槽 -->
    <p>这是主体内容</p>

    <!-- 作用域插槽：接收子组件传出的 item -->
    <template #item="{ item, index }">
      <span>{{ index }} - {{ item.name }}（自定义渲染）</span>
    </template>
  </Card>
</template>

<template>
  <!-- 缓存所有切换的组件 -->
  <keep-alive :max="10">
    <component :is="currentComponent" />
  </keep-alive>

  <!-- include/exclude 控制哪些组件被缓存 -->
  <keep-alive :include="['UserList', 'OrderList']" :exclude="['Detail']">
    <router-view />
  </keep-alive>
</template>

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

// 被 keep-alive 缓存的组件用这两个钩子
onActivated(() => {
  console.log('组件被激活，从缓存进入');
  // 适合刷新数据、恢复定时器
});

onDeactivated(() => {
  console.log('组件失活，进入缓存');
  // 适合暂停定时器、保存状态
});
</script>

// mixin 写法（问题：来源不清、易冲突）
const counterMixin = {
  data() { return { count: 0 }; },
  methods: { increment() { this.count++; } }
};
export default {
  mixins: [counterMixin],
  // 模板里用 count，但不知道它来自 mixin
};

// composable 写法（推荐）
import { ref } from 'vue';
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  return { count, increment };
}
// 使用：清楚知道 count 来自 useCounter，可重命名避免冲突
const { count: pageCount, increment } = useCounter(10);

// Vuex 写法：state -> mutations -> actions 三段式
import { createStore } from 'vuex';
export default createStore({
  state: { count: 0 },
  getters: { doubleCount: (state) => state.count * 2 },
  mutations: { increment(state, n) { state.count += n; } },
  actions: {
    async incrementAsync({ commit }, n) {
      await someApi();
      commit('increment', n); // 必须通过 mutation 改
    }
  }
});

// Pinia 写法（Options Store）：无 mutations
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { doubleCount: (state) => state.count * 2 },
  actions: {
    increment(n) { this.count += n; }, // 直接改
    async incrementAsync(n) {
      await someApi();
      this.count += n;
    }
  }
});

// Pinia 写法（Setup Store）：像写 composable
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore2 = defineStore('counter2', () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);
  const increment = (n) => { count.value += n; };
  return { count, doubleCount, increment };
});

// 组件中使用 Pinia，注意解构要用 storeToRefs 保持响应式
import { storeToRefs } from 'pinia';
import { useCounterStore } from './stores/counter';

const store = useCounterStore();
// state 和 getters 解构需 storeToRefs，action 可直接解构
const { count, doubleCount } = storeToRefs(store);
const { increment } = store;
increment(5);

// 全局前置守卫：登录鉴权
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth && !token) {
    next('/login'); // 重定向到登录
  } else {
    next(); // 放行
  }
});

// Vue Router 4 支持返回值代替 next
router.beforeEach((to, from) => {
  const token = localStorage.getItem('token');
  if (to.meta.requiresAuth && !token) {
    return '/login'; // 返回路径即重定向
  }
  // 返回 false 取消导航，返回 true / undefined 放行
});

// 路由独享守卫
const routes = [{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from) => {
    return checkAdminRole();
  }
}];

// 组件内守卫：离开确认
export default {
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      const answer = window.confirm('有未保存的修改，确定离开吗？');
      next(answer);
    } else {
      next();
    }
  }
};

// Composition API 中的组件内守卫
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
onBeforeRouteLeave((to, from) => {
  return window.confirm('确定离开吗？');
});

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

// hash 模式
const router = createRouter({
  history: createWebHashHistory(),
  routes
});

// history 模式
const router2 = createRouter({
  history: createWebHistory(),
  routes
});

// 路由懒加载：动态 import，webpack/vite 自动分包
const routes = [
  {
    path: '/user/:id', // 动态路由参数
    name: 'User',
    // 懒加载：访问时才加载该组件的 chunk
    component: () => import('./views/User.vue'),
    meta: { requiresAuth: true }
  },
  {
    path: '/user/:id/posts/:postId?', // 可选参数用 ?
    component: () => import('./views/UserPost.vue')
  }
];

// 组件内获取动态参数
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id);

// 动态添加路由（常用于权限路由，登录后按角色注入）
const asyncRoutes = getRoutesByRole(userRole);
asyncRoutes.forEach(route => {
  router.addRoute(route);
});

// SSR 核心流程（Vue3）
import { createSSRApp } from 'vue';
import { renderToString } from 'vue/server-renderer';

// 服务端：把应用渲染成 HTML 字符串
const app = createSSRApp(App);
const html = await renderToString(app);
// 把 html 塞进模板返回给浏览器

// 客户端：水合（hydration），复用服务端 DOM 并接管交互
import { createSSRApp } from 'vue';
const clientApp = createSSRApp(App);
clientApp.mount('#app'); // hydrate 而非重新渲染

<!-- Teleport：把模态框渲染到 body，避免被父级样式影响 -->
<template>
  <div class="component">
    <button @click="open = true">打开弹窗</button>
    <Teleport to="body">
      <div v-if="open" class="modal">
        <p>我被渲染到了 body 下</p>
        <button @click="open = false">关闭</button>
      </div>
    </Teleport>
  </div>
</template>

<!-- Suspense：处理异步组件加载状态 -->
<template>
  <Suspense>
    <!-- 默认插槽：异步组件 -->
    <template #default>
      <AsyncUserProfile />
    </template>
    <!-- fallback 插槽：加载中显示 -->
    <template #fallback>
      <div class="loading">加载中...</div>
    </template>
  </Suspense>
</template>

<script setup>
// 异步组件：setup 中用 await（顶层 await）
// AsyncUserProfile.vue
// <script setup>
// const user = await fetchUser(); // 顶层 await
// </script>
</script>

// 路由懒加载 + 组件懒加载
const Home = () => import('./views/Home.vue');
import { defineAsyncComponent } from 'vue';
const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue'));

// 第三方库按需引入（如 lodash-es、element-plus 按需）
import { debounce } from 'lodash-es'; // 而非 import _ from 'lodash'

<template>
  <!-- v-for 用稳定 key -->
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>

  <!-- 大数据展示用 v-show 复用 DOM，或用虚拟列表 -->
  <!-- 用 v-once 渲染一次不再更新 -->
  <div v-once>{{ staticConfig }}</div>

  <!-- v-memo 缓存子树，依赖不变则跳过更新（Vue3.2+） -->
  <div v-for="item in list" :key="item.id" v-memo="[item.selected]">
    {{ item.name }}
  </div>
</template>

import { shallowRef, shallowReactive, markRaw } from 'vue';

// 大列表/大对象只需引用变化时用 shallowRef，避免深层代理开销
const largeList = shallowRef([]);
largeList.value = newData; // 整体替换才触发更新

// 第三方实例（地图、图表）用 markRaw 标记，不做响应式
const chart = markRaw(new EchartsInstance());

// Vue2 中用 Object.freeze 冻结不变的大数据
const frozenData = Object.freeze(bigArray);

// 只渲染可视区域的列表项，几万条数据只渲染几十个 DOM
// 核心：根据滚动位置计算 startIndex / endIndex，只渲染这个区间
const visibleCount = Math.ceil(containerHeight / itemHeight);
const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = startIndex + visibleCount;
const visibleData = allData.slice(startIndex, endIndex);
// 用 padding 或 transform 撑起总高度，模拟滚动条
// 生产可直接用 vue-virtual-scroller / vueuc VVirtualList

<!-- 设计良好的按钮组件示例 -->
<script setup>
defineProps({
  type: {
    type: String,
    default: 'default',
    // 校验：限定取值范围
    validator: (val) => ['default', 'primary', 'danger'].includes(val)
  },
  size: { type: String, default: 'medium' },
  loading: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false }
});
const emit = defineEmits(['click']);
const handleClick = (e) => emit('click', e);
</script>

<template>
  <button
    :class="['btn', `btn-${type}`, `btn-${size}`]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <span v-if="loading" class="spinner"></span>
    <!-- 用插槽让使用方自定义内容 -->
    <slot>按钮</slot>
  </button>
</template>

import { ref, nextTick } from 'vue';

const count = ref(0);

// 同一 tick 内多次修改，只触发一次 DOM 更新
function batchUpdate() {
  count.value = 1;
  count.value = 2;
  count.value = 3;
  // watcher 去重合并，最终只用 count=3 渲染一次
}

// 事件循环顺序演示
console.log('1 同步'); // 1
Promise.resolve().then(() => console.log('3 微任务')); // 3
setTimeout(() => console.log('4 宏任务'), 0); // 4
console.log('2 同步'); // 2
// 输出顺序：1 -> 2 -> 3 -> 4

// Vue 的 DOM 更新在微任务阶段，nextTick 回调也在微任务
async function demo() {
  count.value = 100;
  // 同步代码里 DOM 还是旧的
  await nextTick(); // 等微任务 flush 完
  // 现在 DOM 已更新
}

// Vue2：新增属性不响应，需 $set
export default {
  data() {
    return { user: { name: 'Alice' } };
  },
  methods: {
    addAge() {
      // 错误：不会触发视图更新
      this.user.age = 18;
      // 正确：用 $set
      this.\$set(this.user, 'age', 18);
      // 数组索引修改也要用 $set
      this.\$set(this.list, 0, newValue);
    }
  }
};

// Vue3：直接赋值即可，Proxy 自动响应
import { reactive } from 'vue';
const user = reactive({ name: 'Alice' });
user.age = 18; // 自动触发更新，无需 $set

<!-- 模板 -->
<div class="static">
  <span>纯静态文本</span>
  <p>{{ message }}</p>
</div>

// 编译后（简化示意）
const _hoisted_1 = /*#__PURE__*/ createElementVNode("span", null, "纯静态文本", -1);
// span 被静态提升，最后一个参数 -1 表示永不更新

function render(_ctx) {
  return (openBlock(), createElementBlock("div", { class: "static" }, [
    _hoisted_1,
    createElementVNode("p", null, toDisplayString(_ctx.message), 1 /* TEXT */)
    // PatchFlag 1 表示只有文本会变
  ]))
}

// 求最长递增子序列（Vue3 源码简化版）
function getSequence(arr) {
  const result = [0];
  const p = arr.slice();
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] === 0) continue;
    const last = result[result.length - 1];
    if (arr[i] > arr[last]) {
      p[i] = last;
      result.push(i);
      continue;
    }
    // 二分查找替换
    let lo = 0, hi = result.length - 1;
    while (lo < hi) {
      const mid = (lo + hi) >> 1;
      if (arr[result[mid]] < arr[i]) lo = mid + 1;
      else hi = mid;
    }
    if (arr[i] < arr[result[lo]]) {
      if (lo > 0) p[i] = result[lo - 1];
      result[lo] = i;
    }
  }
  // 回溯修正
  let u = result.length, v = result[u - 1];
  while (u-- > 0) {
    result[u] = v;
    v = p[v];
  }
  return result;
}

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

// 组合式写法，像写 composable 一样定义 store
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const double = computed(() => count.value * 2);
  function increment() {
    count.value++;
  }
  return { count, double, increment };
});

<script setup>
import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();
// 解构时用 storeToRefs 保持响应式，方法可以直接解构
const { count, double } = storeToRefs(store);
const { increment } = store;
</script>

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

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());
}

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key);
      return result;
    }
  });
}

function effect(fn) {
  activeEffect = fn;
  fn(); // 首次执行触发依赖收集
  activeEffect = null;
}

// 使用
const state = reactive({ count: 0 });
effect(() => console.log('count 变了：', state.count));
state.count++; // 输出：count 变了：1

const callbacks = [];
let pending = false;

function flushCallbacks() {
  pending = false;
  const copies = callbacks.slice();
  callbacks.length = 0;
  copies.forEach((cb) => cb());
}

function nextTick(cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    // 优先用微任务 Promise，回退到 setTimeout
    Promise.resolve().then(flushCallbacks);
  }
}

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

const props = defineProps({
  items: Array,        // 全量数据，如 10 万条
  itemHeight: Number,  // 每项固定高度，如 40px
  visibleCount: Number // 可视区能显示多少项
});

const scrollTop = ref(0);
const startIndex = computed(() => Math.floor(scrollTop.value / props.itemHeight));
const endIndex = computed(() => startIndex.value + props.visibleCount + 2); // 多渲染 2 项做缓冲
const visibleData = computed(() => props.items.slice(startIndex.value, endIndex.value));
const offsetY = computed(() => startIndex.value * props.itemHeight);
const totalHeight = computed(() => props.items.length * props.itemHeight);

function onScroll(e) {
  scrollTop.value = e.target.scrollTop;
}
</script>

<template>
  <div class="viewport" @scroll="onScroll" :style="{ height: visibleCount * itemHeight + 'px', overflow: 'auto' }">
    <!-- 撑起总高度的占位 -->
    <div :style="{ height: totalHeight + 'px' }">
      <!-- 真实渲染的节点用 transform 定位 -->
      <div :style="{ transform: 'translateY(' + offsetY + 'px)' }">
        <div v-for="item in visibleData" :key="item.id" :style="{ height: itemHeight + 'px' }">
          {{ item.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 一个可复用的确认弹窗 -->
<script setup>
defineProps({ title: String, visible: Boolean });
const emit = defineEmits(['confirm', 'cancel', 'update:visible']);
</script>

<template>
  <div v-if="visible" class="dialog">
    <header>
      <slot name="header">{{ title }}</slot>
    </header>
    <main>
      <slot />  <!-- 默认插槽放内容 -->
    </main>
    <footer>
      <slot name="footer" :confirm="() => emit('confirm')">
        <button @click="emit('cancel')">取消</button>
        <button @click="emit('confirm')">确定</button>
      </slot>
    </footer>
  </div>
</template>

// composables/useMouse.js
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 };
}

<script setup>
import { useMouse } from '@/composables/useMouse';
const { x, y } = useMouse(); // 一行复用，且自动管理生命周期
</script>