vue3原理与优化

要深入了解可以自行搜索

效率优化

1. 静态提升
   • 元素节点
   • 没有绑定动态内容
2. 预字符串化

遇到大量连续静态内容，会直接将其编译成为普通的字符串节点

3. 缓存事件处理函数
4. Block Tree

对比新旧两棵树的时候，静态节点不会进行对比，只对比动态节点

5. PatchFlag

vue3知道节点哪些信息会发生变化，仅对比要发生变化的信息

响应式数据的变化

vue3不再使用Object.defineProperty的方式定义完成数据响应式，而是使用Proxy。
除了Proxy本身效率比Object.defineProperty更高之外，由于不必递归遍历所有属性，而是直接得到一个Proxy。所以在vue3中，对数据的访问是动态的，当访问某个属性的时候，再动态的获取和设置，这就极大的提升了在组件初始阶段的效率。
同时，由于Proxy可以监控到成员的新增和删除，因此，在vue3中新增成员、删除成员、索引访问等均可以触发重新渲染，而这些在vue2中是难以做到的。

vite

vite直接启动开发服务器，请求那个模块再对该模块进行实时编译,不需要像webpack那样打包合并，将开发环境下的模块文件作为浏览器要执行的文件，所以启动时不需要分析模块依赖，不需要编译，启动速度非常快，再HMR方面，改动一个模块后，仅需让浏览器重新请求该模块即可，不需要像webpack那样把该模块的相关依赖全部编译依次，效率更高，打包到生产环境时，使用rollup