1. vue3效率的提升
1. 静态提升:vite中内置了模板预编译器,会将vue文件中的template模板编译为render函数。静态元素节点和静态属性会被提升,减少了内存占用。
2. 预字符串化:当编译器遇到template模板中大量连续的静态内容(比如20个节点)时,会直接将其编译为一个普通的字符串节点。节点树减少了超多~
3. 缓存事件处理函数:保证事件处理函数只生成一次,下一次使用就不用再生成了。
4. Block Tree:新旧两颗树对比的时候,提升对比(patch)的效率。
之前vue2对每个对应的节点都进行对比,其中包含大量无用的静态节点对比。
vue3依托他强大的编译器,能够对每一个节点进行标记他是静态的还是动态的。并把所有动态节点提取到根节点里面去,根节点会存储一个所有动态节点的数组。对比的时候直接找到根(block)节点记录的动态节点数组,直接对比新旧两棵树的动态节点数组。(ps:如果树不稳定,会将树的上一级节点也记录为一个block)
5. PatchFlag:vue3编译器在进行标记动态节点的时候,会具体标记这个动态节点的哪些信息是动态的
2. vue3数据响应式
1. vue3直接使用proxy代理来实现响应式,所以对数据的访问是动态的。当访问某一个属性的时候,再动态的获取和设置,极大的提升了组件初始化阶段效率(new Proxy即可)
但vue2需要在组件初始化阶段使用Object.defineProperty递归遍历所有的属性。
2. proxy本身效率就比Object.defineProperty快,且能监听到属性的新增、删除,以及数组的索引访问。Object.defineProperty很难监听到属性的增删和数组的索引访问
3. 为什么vue3中去掉了Vue构造函数
1. 调用构造函数Vue的静态方法会对所有vue应用生效,不利于隔离不同的应用
2. Vue构造函数集成了太多的功能,不利于tree shaking。而vue3把这些功能作为普通函数导出,能够充分利用tree shaking优化打包体积。
3. vue2中没有把组件和vue实例概念区分开。vue2中,使用new Vue创建的对象即是一个vue实例,也是一个特殊的组件。vue3,使用createApp创建的对象是一个vue应用,它内部提供的方法是针对整个应用的,而不再是一个特殊的组件。
4. watch和watchEffect的区别
1. watch需要指定监听的数据和回调函数,watchEffect则会自动手收集依赖
2. watch监测到数据变化时, 能收集到旧值。watchEffect不能
3. watchEffect回调函数会立即执行一次