真实企业面试题2（中小厂）

小文刀696
56 阅读6分钟

vue3 相比较vue2，做了哪些优化？

1. diff算法的优化
- vue3 在diff 算法中新增了静态标记， 就是说可能会发生改变的地方，打上一个标记patchFlag 标记【这些标记主要是 二进制转十进制  1： 动态的文本节点   1 << 1 动态的class ， 1 << 2  动态的style 等等  】

- 静态提升，vue3 中对于不参与更新运算的元素，会做静态提升，只会被创建一次，在必要时候直接复用。
不再
【原理就是被hoistStatic 标记后，这个元素就会被提到render函数的外部，就相当于函数里面定义的变量，每次执

行都会重新创建，但是函数外的，只需要每次拿同一个就好了。静态标记值为 -1 ，特殊标志是负整数表示永远不会用

作 Diff。也就是说被打上 -1 标记的，将不再参与 Diff 算法，这提升了 Vue 的性能。】

- 2.事件监听缓存， 对于一个静态标签的@click 事件【<p @click="pHandler">这是一个p标签</p>】， 其实对于视图渲染还是更新，一般时间绑定的函数逻辑都是不

变的，基本上不需要去追踪它的变化，Vue3 对此也做出了优化，就是事件监听缓存cacheHandler。 这些事件不再会被打上patchFlag, 也就是这个标签，以及所对应的事件不会被追踪比较变化.  进而提升Vue3性能


3.再就是SSR相关的优化： 比如说
开发中使用 SSR 开发时，Vue 3.0 会将静态标签直接转化为文本，相比 React 先将 jsx 转化为虚拟 DOM，再将虚

拟 DOM 转化为 HTML，Vue 3.0 已经赢了。


## StaticNode(静态节点)

上述 SSR 服务端渲染，会将静态标签直接转化为文本。在客户端渲染的时候，只要标签嵌套得足够多，编译时也会将

其转化为 HTML 字符串。

4. 源码体积： vue3 移除很多不常用的api

5. 响应式系统的优化：
vue2中采用 defineProperty来劫持整个对象，深度遍历所有属性，给每个属性添加getter和setter，实现

响应式

vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历

•  可以监听动态属性的添加

•  可以监听到数组的索引和数组length属性

•  可以监听删除属性

对vue的理解

一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助高效地开发用户界面。 Vue 的两个核心功能：

  • 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  • 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

Vue 核心原理详解

一、响应式系统（数据驱动视图）

  1. ‌数据劫持与监听‌

    • ‌Vue 2.x‌：通过 Object.defineProperty 拦截对象属性的 getter/setter，实现数据变化监听。但无法直接监听数组索引和动态新增属性，需通过 Vue.set 或 Vue.delete 操作‌12。
    • ‌Vue 3.x‌：改用 Proxy 代理对象，支持动态属性、数组索引监听，并减少递归劫持的性能损耗‌34。
    • ‌深层监听‌：递归劫持嵌套对象的属性，确保深层数据变化触发视图更新‌13。

  2. ‌依赖收集与更新触发‌

    • ‌依赖收集‌：组件渲染时，Watcher 实例通过 getter 收集依赖的响应式数据，建立数据与视图的关联‌12。
    • ‌异步更新队列‌：数据变更触发 Dep.notify()，通知 Watcher 将更新任务推入队列，通过 nextTick 批量处理，避免重复渲染‌23。
二、虚拟 DOM 与 Diff 算法（渲染优化）

  1. ‌虚拟 DOM 生成‌

    • 将真实 DOM 抽象为轻量级 JS 对象（虚拟节点），描述标签、属性和子节点‌23。
    • 每次数据变化生成新虚拟 DOM 树，与旧树对比差异‌34。

  2. ‌Diff 算法策略‌

    • ‌同层比较‌：仅对比同级节点，避免跨层递归复杂度‌23。
    • ‌Key 标识‌：通过唯一 key 标记列表项，复用相同节点（如 v-for），减少 DOM 操作‌24。
    • ‌静态标记优化‌：Vue 3 引入 Patch Flags 标记动态节点，跳过静态子树对比‌45。

  3. ‌DOM 更新‌
    Diff 结果通过 patch 方法转换为新增、删除、移动节点等具体 DOM 操作‌34。

三、模板编译（声明式语法到渲染函数）

  1. ‌模板解析‌

    • 将模板字符串解析为抽象语法树（AST），识别指令（如 v-if、v-for）和插值表达式‌14。
    • 例如 <div>{{ message }}</div> 被解析为包含数据绑定的 AST 节点‌14。

  2. ‌AST 优化‌

    • ‌静态节点标记‌：标记无数据绑定的静态节点，后续 Diff 跳过对比‌46。
    • ‌静态提升‌：Vue 3 将静态节点提取到渲染函数外，避免重复创建‌45。

  3. ‌生成渲染函数‌
    AST 转换为 render 函数，返回虚拟 DOM 结构。例如：

    javascriptCopy Code
render() { return h('div', this.message) }

    该函数在组件实例化时执行，生成虚拟 DOM‌45。

四、组件化架构（模块化开发）

  1. ‌组件定义与通信‌

    • 组件通过 .vue 单文件封装模板、逻辑和样式，支持复用‌24。
    • 父子组件通过 props 传递数据，$emit 触发事件通信‌25。

  2. ‌生命周期管理‌

    • ‌关键阶段‌：created（数据初始化）、mounted（DOM 挂载）、updated（数据更新）、destroyed（组件销毁）‌25。
    • 钩子函数用于资源管理（如请求数据、清理定时器）‌57。
五、架构优化与版本差异
‌特性‌‌Vue 2‌‌Vue 3‌
‌响应式实现‌Object.definePropertyProxy
‌API 设计‌Options API（选项式）Composition API（组合式）
‌体积优化‌全量引入Tree-Shaking 支持按需加载
‌性能提升‌递归劫持性能损耗代理对象 + 静态标记优化

总结

Vue 通过 ‌响应式数据劫持‌ 实现数据驱动视图更新，结合 ‌虚拟 DOM 和 Diff 算法‌ 减少真实 DOM 操作，借助 ‌模板编译‌ 将声明式语法转换为高效渲染函数，并以 ‌组件化架构‌ 提升代码复用性。其核心设计平衡了开发效率与运行时性能，使开发者聚焦业务逻辑而非底层实现‌

avatar
文章
阅读
粉丝