vue3新特性

一、检测机制

• vue2中基于Object.defineProperty的observer实现，vue3中则基于Proxy
  的observer实现
  • 对属性的添加、删除动作的监测
  • 对数组基于下标的修改，对于length修改的监测
  • 对Map、Set的支持
  • 默认为惰性监测
    1、 在2.x版本中，响应式数据都会在启动的时候进行监测，如果数据量较大，会有严重的性能消耗
    2、 在3.x版本中，只有应用初始可见部分所用到的数据会被监测到
  • 更精准的变动通知：
    1、在2.x版本中，通过Vue.set强制添加一个新的属性，所有依赖这个对象的watch函数都被执行一次
    2、在3.x中，只有依赖这个具体属性的watch函数被通知
  • 更好的调试：
    1、通过使用新增的renderTracked和renderTriggered钩子，可以精确的追踪到一个组件发生重新渲染的触发时机及原因
  • 暴露出observable的api来创建响应式对象，可以替代掉event bus,做一些跨组件的通信

二、性能优化

• 组件渲染：
  1、在2.x版本中，父组件重新渲染时，其子组件也必须重新渲染(前提是修改的数据是子组件的props，才会触发子组件的重新渲染)
  2、在3.x版本中，可以单独重新渲染子组件或者父组件
• 静态树提升
  1、 在3.x版本中，编译器可以检测到静态组件，将其提升，降低渲染成本
• 静态属性提升

三、合成API(Composition API)

• 安装使用

  
  n.png
  u.png

• 示例

  
  示例

• 代码复用三种方法比较
  

  01.png
  02.png
  03.png
  https://vue-composition-api-rfc.netlify.com/api.html
  https://vue-composition-api-rfc.netlify.com/api.html#setup
  https://segmentfault.com/a/1190000020205747?utm_source=tag-newest