vue.js3.0的优化

vue3中的具体优化：
1.首先是源码方面的优化

源码的优化主要体现在使用monorepo和typescript管理和开发源码，这样做的目标是提升自身代码可维护性

2.使用Typescript进行开发

因为他在编码期间帮你做类型检查，避免一些因类型问题导致的错误
有利于它去定义接口的类型。

3.源码体检的减少

• 移除了一些冷门的feature(特性),并且引入了tree-shaking技术。
• tree-shaking 依赖的是es2015模块语法的静态结构(即import和export)，通过编译阶段的静态分析，找到没有引入的模块并打上标记，也就是说如果你在项目中没有引入keep-alive或者transition等组件，那么他们对应的代码就不会打包，这样也就间接达到了减少项目引入的vue.js包体积的目的，从而进行了项目的优化

4.数据劫持优化

• vue2中的数据劫持是通过Object.defineProperty这个API劫持数据的getter和setter这个defineProperty有一定的缺陷，必须预先知道他的key是什么，它并不能监测到对象的属性添加和删除，尽管有$set和$delete。如果是嵌套层级比较深的话，vuejs无法判断你到底会访问那个属性，如果要劫持深层属性的变化，就要进行遍历，在通过object.defineProperty将属性进行劫持，性能消耗比较大
• vue3使用了Proxy Api 做数据劫持，他劫持的是整个对象，自然对属性的增加和删除都可以监听到，但是Proxy Api 并不能监听到内部深层次的对象变化，因此vue3的处理方式是在getter中去递归响应式，这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑的进行递归，这样无疑也在很大程度上提升了性能。

5.编译优化

• vue2的数据更新并触发重新渲染的粒度是组件级的，说白了就是在发生数据更新的时候，要遍历整个组件的dom树(尽管有的节点没有绑定数据–静态节点，也会进行遍历)。
• vue3在编译节点对静态模板进行了分析，并编译生成了block tree
  • 1）block tree 是一个将模板基于动态节点指令切割的嵌套区域，每个区块内部的节点结构是固定的，每个区块只需要以一个Array来追踪自身包含的动态节点。
  • 2）借助block tree，vuejs将vnode更新性能由与模板整体大小相关提升为与动态内容的数量相关
• 还包括了对slot的编译优化，事件侦听函数的缓存优化，并且在运行时重写了diff算法。

6.语法优化

• vue2使用的是option API
• vue3提供了composition API，其实就是将某个逻辑关注点相关的代码全部都放在一个函数里面，这样我们在修改一个功能的时候就不需要再文件中跳来跳去的了
• 优化逻辑的复用
  • 我们在vue2中常用的方法是通过mixin来实现逻辑的服用——然而mixin都可以定义自己的props、data，他们之间是无感的，所以很容易在文件中出现相同的变量，导致命名冲突
    -然而对于组件而言，如果模板中使用不在当前组件文件中定义的变量，那么就会不太容易知道这些变量在那里定义的，这就是数据来源不清晰。
  • vue中我们就可以使用hook函数来规避调这写问题
• 除了在逻辑服用方面的优势，也会有更好的类型支持，因为他们都是一些函数，在调用函数的时候，自然所有的类型就被推到出来了，跟vue2中的options Api不同，所有的东西都是用this。
• 另外 Composition APi对tree-sharking也是友好的，代码也更加容易压缩
  当然composition API 还是有缺点的。

此文章是根据b站视频汇总，如有侵权请告知