一、检测机制
- 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
