Vue的相关面试题--- theme: smartblue --- #### 一、 Vue的基本原理 **基本原理（响应

基本原理（响应式原理）：

vue通过Object.defineProperty进行数据劫持，遍历data里的属性，将其转化为getter和setter，并通过依赖收集（watcher→dep）和派发更新（dep→watcher）实现数据驱动视图。

vue3是Proxy

进一步理解说明：

技术手段：Object.defineProperty（Vue 2）。
核心操作：定义getter和setter。
关键机制：在getter中收集依赖（Dep ← Watcher），在setter中派发更新（Dep → Watcher）。（每个属性都有一个dep容器，dep收集watcher，watcher是每一个和属性关联的依赖方-组件、computed、watch、methoud等）
最终目标：实现数据驱动视图的自动更新。

深度理解：

通常被称为 “发布-订阅”模式或 “依赖追踪”模型。核心思想可以概括为三句话：

最核心、最通俗的解释：

「劫持」数据： Vue 会把你写在 data 里的所有属性，用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）「加工」一遍，给每个属性装上 getter 和 setter。从此，你读或写这些属性，Vue 都能知道。
「收集」依赖：当你读取属性时（比如在模板里用了 {{ message }}），getter 会触发，Vue 就会把这个「使用数据的地方」（比如当前组件的渲染函数）记下来，当做这个属性的一个「依赖」（订阅者）。简单说：谁用了我这个数据，我就把谁记在小本本上。
「通知」更新：当你修改属性时（比如 this.message = 'new'），setter 会触发，Vue 就会去翻出第二步记的「小本本」，通知所有「依赖」这个数据的地方：“我变了！你们该更新了！”。然后，页面就会自动重新渲染。简单说：数据一变，就通知所有用到它的地方更新。

数据→视图：由响应式原理实现；

视图->数据：通过标准的事件监听机制实现的。

(双向绑定是一个语法糖，它描述了数据和视图之间的双向关系； v-model 并不是什么魔法，它本质上是一个语法糖，是v-bind（数据绑定）和v-on:input（事件监听）的结合体。

在Vue 3中，性能优化方面也有一些新的特性和改进。

1）响应式系统重构（Proxy 机制）：
- 优化点： Vue 2 使用 Object.defineProperty 递归遍历对象属性，初始化负担重且无法监听属性新增/删除。
- Vue 3： 使用 ES6 的 Proxy 代理整个对象。
  - 懒响应式： 只有当你真正读取一个对象的属性时，才会对该属性进行响应式转换，消除了初始化时递归遍历的性能开销。
  - 内存占用： 大幅减少了初始化时的内存占用。
2） Fragment（碎片节点）：
- 优化点： Vue 2 要求组件必须有且只有一个根节点，导致许多无意义的包裹容器（例如多余的 div）。
- Vue 3： 组件支持多个根节点。
- 优势： 减少了 DOM 树的层级嵌套，降低了浏览器渲染引擎在绘制和布局时的计算成本（减少回流重绘的复杂度）。

Vue 3对编译器进行了改进，引入了一些优化措施来提升编译的效率和性能。

1）静态提升：在Vue 2中，模板中的静态内容在每次重新渲染时都会被重新创建，这可能导致一些性能损失。而在Vue 3中，通过静态提升技术，编译器可以检测并优化静态内容，将其提升为静态的常量，减少了重新创建的开销。（静态节点提升：编译器会检测模板中的静态节点，并将其提升为常量，避免在每次重新渲染时都创建新的VNode，减少了渲染开销。）

静态提升可以带来以下优势：
- 减少了虚拟DOM的创建和比对次数，提升了渲染性能。
- 通过减少不必要的DOM操作，降低了页面的回流和重绘成本。
2）Patch flag：编译器会根据模板的静态内容和动态内容的不同，为每个VNode节点添加一个Patch flag，用于在更新过程中进行更精细的操作，减少不必要的比对和渲染操作。
3）缓存事件处理函数：Vue 3中，编译器会将事件处理函数进行缓存，避免在每次重新渲染时都创建新的函数实例，提升了事件处理的性能。
4）静态节点预字符串化：
- 优化点： 当编译器遇到大量连续的静态节点时（例如一大段纯静态的HTML文本），Vue 3 会直接将这些节点序列化为一个字符串，并设置为 innerHTML。
- 优势： 这跳过了创建大量独立 VNode 的过程，减少了内存占用，并且直接将字符串扔给 innerHTML，比挨个创建 DOM 节点快得多。

Tree shaking：Vue 3的编译器支持将模板中未使用的组件和指令进行剔除，从而减小打包体积，提升应用的加载性能
- 优化点： Vue 3 的核心库通过 ES Module 方式组织，并将很多内置功能（如 v-model 指令、transition 组件）设计成按需引入。
- 优势： 如果你没有使用 <transition> 组件，最终打包的代码中就不会包含该组件的代码。这直接减少了打包后的 JS 体积，提升了首屏加载速度。

优化点： Vue 3 将核心逻辑与渲染器分离，提供了更底层的优化能力。
v-once 与 v-memo：
- v-once：用于渲染一次后不再更新的静态内容。
- v-memo（Vue 3.2+）：这是一个更强大的优化工具，允许开发者通过数组依赖来控制子树的更新，在大型列表渲染或复杂条件渲染中，可以跳过大量的虚拟 DOM 比对。

Vue的相关面试题