Vue 性能优化解析 ​

优化方案 ​

减少更新次数、缩小更新范围。如何做到，先了解下更新最小单位。

vue 和 react 最小单位都是一个组件，更新优化策略区别在于 vue 有依赖收集，可以做到最小范围 diff 计算，而 react 是直接一整颗组件树重新 diff 计算。

依赖收集 ​

vue3 通过 proxy 中的 get 收集依赖，set 触发更新。流程如下：

页面第一次渲染时，根据使用到的值，触发 get 监听，记录这个页面用到该数据的地方（组件），加到该数据专属的 dep 对象（dep 对象保存依赖该数据的组件），每当我们修改值触发 set 就会这个 dep 对象中的组件更新一次。

更新过程 ​

页面第一次渲染时，会创建一颗虚拟 DOM 树，根据虚拟 DOM 树创建真实 DOM；产生变化时，重新遍历虚拟 DOM 树，进行新旧虚拟 DOM 对比，确定哪里修改了，改了什么，用最简单的更新策略更新。

更新策略 ​

通过对比某个虚拟 dom 的某一个 dom：

1. key 值、标签类型改变：直接删除就 dom，重新使用 createElement() 创建新的 dom
2. 写死的 dom：直接跳过对比
3. 文字、属性改变：使用 innerHtml 和 setAttribute 修改原 dom

Q&A ​

• dep 对象的数据格式是什么?
• 有哪些更新策略？