# 谈谈你对 Vue 的理解？为什么使用 Vue 进行开发？根据官方说法，Vue 是一套用于构建用户界面的渐进式框架。Vue 的设计受到了 [MVVM](https://zh.wikipedia.org/wiki/MVVM) 的启发。Vue 的两个核心是**数据驱动**和**组件系统**。我为什么使用 Vue，有以下几个原因： 1. Vue 对于前端初学者比较友好。一个 Vue 文件的结构和原生 HTML 保持了高度相似，分为静态页面，用于放置 html 标签，和 script，用于处理用户操作和业务逻辑，最后是 style 样式，用于书写 CSS 代码，这种写法可以让初学者感到习惯。 2. Vue 提供了许多 JS 定制化的操作，比如 v-bind 和事件监听的 @ 符号，开发者可以直接使用，从而减少一些重复代码的书写。 3. Vue 提供一套高效的响应式的系统用于更新 DOM，可以让开发者专注于处理业务而非技术实现。 4. Vue 鼓励组件化开发，开发者可以将部分界面提取为组件，尤其是复用性较高的界面，使代码更加模块化、可维护性更高。 5. Vue 在国内拥有庞大且活跃的社区，开发者可以获得丰富的文档、教程、插件和支持。这个问题是开放性问题，具体如何回答可以自由发挥。 # 刚才提到了 MVVM，可以介绍一下吗？ **MVVM**，即 **Model–View–ViewModel**，是一种软件架构模式。 * `Model` 即模型，是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。 * `View` 即视图，是用户在屏幕上看到的结构、布局和外观（UI）。 * `ViewModel` 即视图模型，是暴露公共属性和命令的视图的抽象。用于把 `Model` 和 `View` 关联起来。`ViewModel` 负责把 `Model` 的数据同步到 `View` 显示出来，还负责把 `View` 的修改同步回 `Model` 。 ![MVVM](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f050fb2b26d456c8872fb2ba050e70c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=556\&h=423\&e=webp\&b=fefdfd) 在 MVVM 架构下，`View` 和 `Model` 之间并没有直接的联系，而是通过 `ViewModel` 进行交互，`Model` 和 `ViewModel` 之间的交互是双向的，`View` 数据的变化会同步到 `Model` 中，而 `Model` 数据的变化也会立即反应到 `View` 上。因此开发者只需关注业务逻辑，不需要手动操作 `DOM`，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 # Vue 3 有什么主要变化？ 1. **引入了 Composition API（组合式 API）**：这种方式允许开发者使用函数而不是选项对象来组织组件的代码，通过组合式 API 可以更灵活地组织和复用组件逻辑，使得代码更具可读性和维护性。 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/cdf669bf71ae45c2824601496c2cb03c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgbGltZW5nemhl:q75.awebp?rk3s=f64ab15b&x-expires=1773740193&x-signature=YinpqrdudlGneU%2F4Av0W7ibaLmA%3D) 2. **支持多根组件**：可以直接在 template 中使用多个根级别的元素，而不需要额外的包装元素。这样更方便地组织组件的结构。 3. **引入了 Teleport（传送）**：可以将组件的内容渲染到指定 DOM 节点的新特性。一般用于创建全局弹窗和对话框等组件。 4. **数据劫持方法升级**：从 `Object.defineProperty` 升级到 ES6 原生的 Proxy，不需要初始化遍历所有属性，就可以监听新增和删除的属性。 5. **编译优化**：重写了虚拟 DOM，提升了渲染速度。diff 时静态节点会被直接跳过。 6. **体积优化**：移除了一些非必要的特性，如 `filter` 和 `.native` 修饰符。另外，所有模块也将会被按需引入，仅打包用到的模块，从而减小了打包体积。 7. **打包优化**：更强的 Tree Shaking，可以过滤不使用的模块，没有使用到的组件，比如过渡（transition）组件，则打包时不会包含它。 8. **通过 monorepo 方式维护**：Vue 3 根据功能的不同将模块拆分成不同的 `package`，拆分后的模块更细化，职责划分更明确，开发人员更容易阅读和理解源码。并且，一些 `package`（比如 `reactivity` 响应式库）是可以独立于 `Vue` 使用的，这样用户如果只想使用 Vue 的响应式能力，可以单独引入这个响应式库。 # Composition API（组合式 API）与 Options API（选项式 API）有什么区别？ * Options API 会将组件中的同一逻辑相关的代码拆分到不同选项，比如 `data`、`props`、`methods` 等，而使用 Composition API 较为灵活，开发者可以将同一个逻辑的相关代码放在一起。 * Composition API 通过 Vue 3.x 新增的 setup 选项进行使用，该选项会在组件创建之前执行，第一个参数 `props`，第二个参数 `context`，return 的所有内容都会暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。 * Composition API 上的生命周期钩子与 Options API 基本相同，但需要添加前缀 `on`，比如 `onMounted`、`onUpdated` 等。 # 为什么 Vue 3 使用 Proxy 代替 `Object.defineProperty()` ？ * Proxy 专门被设计用于代理对象，可以直接监听整个对象，而 `Object.defineProperty()` 需要遍历对象的每个属性（所以只能代理已存在的属性）再去进行监听。 * 因为数组也是对象，`typeof [] === 'object'`，所以 Proxy 还可以代理数组，而在 Vue 2 中则是通过重写数组的以下七种方法实现的。 * `push()`（将一个或多个元素添加到数组的末尾，并返回该数组的新长度） * `pop()`（移除并返回数组的最后一个元素） * `unshift()`（将一个或多个元素添加到数组的开头，并返回该数组的新长度） * `shift()`（移除并返回数组的第一个元素） * `splice()`（删除数组中的一个或多个元素，并将其返回） * `sort()`（对数组进行排序） * `reverse()`（对数组进行反转） * `Object.defineProperty()` 的本质是在一个对象上定义一个新属性，或者修改一个现有属性。 ```js const cat = { name: 'Tom', } Object.defineProperty(cat, 'name', { get() { console.log(`我被读取了`) }, set(value) { console.log(`我被设置成了 ${value}`) }, }) cat.name // expected output: 我被读取了 cat.name = 'Kitty' // expected output: 我被设置成了 Kitty ``` * Proxy 有 13 种拦截操作的方法，是 `Object.defineProperty()` 不具备的。 * `apply()`（拦截函数的调用） * `construct()`（拦截构造函数的调用） * `defineProperty()`（拦截属性的定义） * `deleteProperty()`（拦截属性的删除） * `get()`（拦截对象属性的读取） * `getOwnPropertyDescriptor()`（拦截对象属性的描述） * `getPrototypeOf()`（拦截对象的原型） * `has()`（拦截对象属性的检查） * `isExtensible()`（拦截对象是否可扩展的检查） * `ownKeys()`（拦截对象的属性列表） * `preventExtensions()`（拦截对象是否可扩展的设置） * `set()`（拦截对象属性的设置） * `setPrototypeOf()`（拦截对象的原型的设置） # Vue 3 响应式系统的原理响应式系统是 Vue 最核心的功能。所有组件的状态都是由 Vue 响应式的对象组成的。当更改它们时，视图会随即自动更新。在 JavaScript 中有两种劫持 property 访问的方式：[getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#description) / [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#description) 和 [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)。Vue 3 中使用 Proxy 用于 `reactive` 及相关 API 创建响应式对象，使用 getter / setter 用于 `ref` 及相关 API 劫持基本类型。实现 `reactive` 的核心代码： ```js function reactive(obj) { return new Proxy(obj, { get(target, key) { track(target, key) return target[key] }, set(target, key, value) { target[key] = value trigger(target, key) } }) } ``` 实现 `ref` 的核心代码： ```js function ref(value) { const refObject = { get value() { track(refObject, 'value') return value }, set value(newValue) { value = newValue trigger(refObject, 'value') } } return refObject } ``` 如代码所示，Vue 3 的响应式系统在设置属性时通过 `track` 跟踪并收集依赖，在设置属性时通过 `trigger` 触发更新，来实现响应性。 🔔 *面试官可能会继续追问，或者根据实际情况主动回答：* ## track 和 trigger 是如何实现的？ `track()` 用于跟踪并收集依赖。在 `track()` 内部会检查当前是否有正在运行的 effect（通常用于更新视图）。如果有，则会查找追踪该属性的订阅者的集合（Set，3.4 之后改为了 Map），然后将当前这个 effect 作为新订阅者添加到该集合中。 ```js // 这会在一个副作用就要运行之前被设置 // 我们会在后面处理它 let activeEffect function track(target, key) { if (activeEffect) { // 查找相应属性订阅的 effect 集合，如果没有则新建 const effects = getSubscribersForProperty(target, key) effects.add(activeEffect) } } ``` `trigger()` 用于执行 effect。在 `trigger()` 内部会查找在 `track()` 时保存的该属性的所有订阅者的 effect，然后执行它们。 function trigger(target, key) { const effects = getSubscribersForProperty(target, key) effects.forEach((effect) => effect()) } # Vue 是如何实现数据双向绑定的？v-model 的原理？ Vue 组件可以通过使用 `v-model` 指令以实现双向绑定。 `v-model` 是 vue 的一个语法糖，它用于监听数据的改变并将数据更新。以 input 元素为例： ```html ``` 其实就等价于 ```html ``` # 如何在组件中实现 v-model ？在 Vue 2 组件中实现 `v-model`，只需定义 `model` 属性即可。 ```js export default { model: { prop: 'value', // 属性 event: 'input', // 事件 }, } ``` 在 Vue 3 组合式 API 实现 `v-model`，需要定义 `modelValue` 参数，和 `emits` 方法。 ```js defineProps({ modelValue: { type: String, default: '' }, }) const emits = defineEmits(['update:modelValue']) function onInput(val) { emits('update:modelValue', val) } ``` # 当数据改变时，Vue 是如何更新 DOM 的？（Diff 算法和虚拟 DOM）当我们修改了某个数据时，如果直接重新渲染到真实 DOM，开销是很大的。Vue 为了减少开销和提高性能采用了 Diff 算法。当数据发生改变时，**Observer** 会通知所有 **Watcher**，**Watcher** 就会调用 `patch()` 方法（Diff 的具体实现），把变化的内容更新到真实的 DOM，俗称**打补丁**。 Diff 算法会对新旧节点进行同层级比较，当两个新旧节点是相同节点的时候，再去比较他们的子节点（如果是文本则直接更新文本内容），逐层比较然后找到最小差异部分，进行 DOM 更新。如果不是相同节点，则删除之前的内容，重新渲染。 ![逐层比较](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02bc504eba624923bf0c3ec4202bf129~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=377\&h=199\&e=webp\&b=fefcfc) `patch()` 方法先根据真实 DOM 生成一颗虚拟 DOM，保存到变量 `oldVnode`，当某个数据改变后会生成一个新的 `Vnode`，然后 `Vnode` 和 `oldVnode` 进行对比，发现有不一样的地方就直接修改在真实 DOM 上，最后再返回新节点作为下次更新的 `oldVnode`。 # 什么是虚拟 DOM？有什么用？虚拟 DOM（Virtual DOM）就是将真实 DOM 的属性使用 JavaScript 对象描述，用于优化 DOM 操作。比如真实 DOM 如下： ```html

Page Title

``` 对应的虚拟 DOM 就是（伪代码）： ```js const vnode = { tag: 'div', props: { id: 'hello', }, children: [ { tag: 'h1', innerText: 'Page Title', }, ], } ``` 虚拟 DOM 的主要目的是提高性能和减少实际 DOM 操作的次数，从而改善用户界面的渲染速度和响应性。 # Vue 3 对 diff 算法进行了哪些优化？ ## 静态内容缓存在 Vue 2 中，每当数据发生变化时，Vue 会创建一个新的虚拟 DOM 树，并对整个虚拟 DOM 树进行递归比较，即使其中大部分内容是静态的，最后再找到不同的节点，然后进行更新。 Vue 3 引入了静态标记的概念，通过静态标记，Vue 3 可以将模板中的静态内容和动态内容区分开来。这样，在更新过程中，Vue 3 只会关注动态部分的比较，而对于静态内容，它将跳过比较的步骤，从而避免了不必要的比较，提高了性能和效率。 ```html

foo

bar

``` ## 事件监听缓存在 Vue 2 中，当元素绑定了一些事件时，每次渲染该元素时，都会重新给此元素绑定事件，即使组件的状态没有变化，这不仅浪费资源，还可能导致内存泄漏。 ```html ``` 为了解决这个问题，Vue 3 引入了事件监听缓存，在第一次渲染时注册并缓存事件监听器，并在后续渲染时复用这些监听器，除非显式更新它们。 # Vue 中的 key 有什么用？ * 在 Vue 中，key 被用来作为 VNode 的唯一标识。 * key 主要用在虚拟 DOM Diff 算法，在新旧节点对比时作为识别 VNode 的一个线索。如果新旧节点中提供了 key，能更快速地进行比较及复用。反之，Vue 会尽可能复用相同类型元素。 ```html

{{ item.name }}

``` * 手动改变 key 值，可以强制 DOM 进行重新渲染。 ```html {{ text }} ``` # Vue 实例的生命周期钩子都有哪些？生命周期钩子是指一个组件实例从创建到卸载（销毁）的全过程，例如，设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。在这个过程中会运行一些叫做生命周期钩子的函数，从而可以使开发者们在不同阶段处理不同的业务。 ## Vue 3 选项式 API 的钩子和 Vue 2 大致是一样的，有以下钩子： * beforeCreate 实例初始化之前，`$el` 和 `data` 都为 `undefined`。 * created 实例创建完成，`data` 已经绑定。但 `$el` 不可用。 * beforeMount 将 `