浅谈vue3 和 vue2的区别

devtools/2024/11/24 3:59:34/

vue3中不再导出一个Vue的构造函数，而是具名导出很多数据
不给用户提供Vue构造函数来创建vue实例，使用一个具名导出的createApp，然后传入一个根组件来创建，然后返回一个类似于vue实例的对象，调用mount方法来实现挂载
组件中兼容vue2的写法，只不过函数中的this指向不再是vue的组件实例，而是一个proxy代理对象。
vue3中同时增加了composition api的编程思想。
vue3中的组件可以不再单根
vite构建工具（同时也是一个脚手架）伴随着vue3的出现，与webpack相比，组件越多，vite的打包效率越快
- 使用vite，引用文件时，除了.js文件不需要加后缀名，其他文件都需要添加上后缀名，否则vite无法识别
vue3 在编译时效率上的提升：
- 静态提升：vue3会识别组件中的一些没有绑定动态内容的静态节点，然后将这些节点编译过后，使用变量保存起来，之后再去重新生成虚拟dom时，不再创建，而是直接拿到之前保存的已经生成好的虚拟dom来使用；属性是静态时，也会将属性用变量保存起来，之后重新生成虚拟dom时会重用该变量
- 预字符串化：当编译器遇到大量连续的静态内容，会直接将其编译为一个普通字符串节点
```
const _hoisted_2 = _createStaticVNode("<div class=\"logo\"><h1>logo</h1></div><ul 
class=\"nav\"><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a 
href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li> 
</ul>")
```
- 缓存事件处理函数：vue3中的render函数中传入了缓存对象_catch，这里面缓存了事件处理函数，这样在每次重新渲染时就不会重新生成一个一模一样的函数，减少内存开销
- block tree：在vue3中，对比虚拟dom之前，会根节点中记录有哪些节点时动态节点，在对比时会直接对比记录的动态的节点，不会再去对比组件中的静态节点（如果虚拟dom树不稳定，则会进行其他处理）
- patchFlag：在vue2中比对节点时，不知道那些发生了变化，只会一个个的对比，而在vue3中，记录了节点中哪些是动态的，真正需要比对的，所以在对比时，直接对比真正有可能发生变化的部分。
  未完待续...