原文链接: https://interview.poetries.top/docs/excellent-docs/7-Vue.html

Vue

简版速记

面试前快速过一遍的高频考点，每条都是「问到时能立刻说出口」的精炼版。

MVVM：Model-View-ViewModel，ViewModel 通过双向绑定连接数据与视图；Vue 借鉴该思想但本质是 MVVM 的「响应式 + 数据驱动视图」。
响应式原理（Vue2）：Object.defineProperty 劫持每个属性的 getter/setter；getter 收集依赖（Dep 收集 Watcher），setter 派发更新（dep.notify()）。缺陷：无法监听新增/删除属性（需 Vue.set/Vue.delete）、数组索引和 length 改动；需递归遍历，深层对象有性能开销。
响应式原理（Vue3）：Proxy + Reflect 惰性代理整个对象，天然支持新增/删除属性与数组索引，按需递归（访问时才代理嵌套对象），性能更好。
数组监听：Vue2 重写了 7 个变异方法（push/pop/shift/unshift/splice/sort/reverse）的原型来触发更新；直接改索引/length 不生效。
依赖收集：每个响应式属性持有一个 Dep，渲染时 Watcher 读取触发 getter → 把当前 Watcher 收进 Dep；数据变化时 Dep 通知所有 Watcher 更新。
nextTick：DOM 更新是异步的，nextTick 把回调放进微任务队列（优先 Promise.then，降级 MutationObserver/setImmediate/setTimeout），在本轮 DOM 更新后执行。
computed vs watch：computed 有缓存（依赖不变不重算）、用于派生值；watch 无缓存、用于「数据变化执行副作用」（异步/开销大的操作）。
diff 算法：同层比较 + 双端比较（头头、尾尾、头尾、尾头）+ key 复用节点；key 必须唯一稳定，避免用 index 作 key。
生命周期：beforeCreate → created（可访问 data，不可访问 DOM）→ beforeMount → mounted（可访问 DOM）→ beforeUpdate → updated → beforeDestroy/beforeUnmount → destroyed/unmounted；keep-alive 额外有 activated/deactivated。数据请求一般放 created（SSR 友好）或 mounted。
v-if vs v-show：v-if 真正增删 DOM、有更高切换开销、惰性；v-show 只切 display、初始渲染开销大、切换频繁用它。
v-if 与 v-for：Vue2 中 v-for 优先级更高（同元素上会先循环再判断，浪费），Vue3 中 v-if 优先级更高；都应避免同元素混用，改用计算属性过滤。
组件 data 为函数：每个组件实例需独立数据副本，函数返回新对象避免实例间共享引用。
双向绑定 v-model：语法糖 = :value + @input（Vue2）；Vue3 默认 modelValue + update:modelValue，支持多个 v-model 与自定义参数。
组件通信：props/$emit、$attrs/$listeners（Vue3 合并到 $attrs）、provide/inject、ref、EventBus、Vuex/Pinia。
keep-alive：缓存组件实例（LRU，max/include/exclude），命中缓存触发 activated/deactivated 而非重新创建。
状态管理：Vue2 用 Vuex（state/getters/mutations/actions）；Vue3 推荐 Pinia（去掉 mutation、原生 TS 友好、扁平 store、支持插件）。
Vue3 核心升级：Proxy 响应式、Composition API（<script setup>）、更好的 TS 支持、Tree-shaking 体积更小、Fragment/Teleport/Suspense、编译期静态提升与 patchFlag 优化。
异步渲染原因：避免同一事件循环内对同一数据多次修改导致重复渲染，合并到 nextTick 批量更新提升性能。

Vue

简版速记

目录

详情