02-Vue3响应式原理

Vue3响应式

Vue3对比Vue2的变化

• 在Vue2的时候使用defineProperty来进行数据的劫持（缺点：只能劫持已经存在的属性），需要对属性进行重写添加 getter 和 setter 性能差。
• 当新增属性和删除属性时无法监控变化。需要通过 $set  $delete 来实现。
• 数组不采用defineProperty来进行劫持（浪费性能，对所有索引进行劫持会造成性能浪费）需要对数组单独进行处理

Vue3中使用Proxy来实现响应式数据变化。从而解决了上述问题。

 CompositionAPI

• 在Vue2中采用的是OptionAPI，用户提供的 data props methods computed watch等属性（用户编写复杂业务逻辑会出现反复横跳问题）
• Vue2中所有的属性都是通过 this 来访问， this 存在指向明确问题
• Vue2中很多未使用方法或者属性依旧会被打包，并且所有全局API都在Vue对象上公开。CompositionAPI 对 tree-shaking 更加友好，代码也更容易压缩。
• 组件逻辑共享问题，Vue2采用mixins实现组件之间的逻辑共享；但是会有数据来源不明确，命名冲突等问题。Vue3中采用 compositionAPI 提取公共逻辑非常方便。

effect

        代表的是副作用函数，如果此函数依赖的数据发生变化了，会重新执行。默认先执行一次，对响应式数据进行取值。

reactive

        将数据变为响应式，proxy