Vue2.0与Vue3.0响应式原理简析

Vue2.0的响应式原理

主要使用Object.defineProperty()，核心思想是observe（） 遍历

1.对象的响应式

遍历每个对象的key值，设置定义getter和setter

2.数组的响应式

覆盖数组原型方法，额外增加通知逻辑

覆盖可以修改数组的7个方法，从数组的原型中获取这7个方法，覆盖为可以更新发送通知的函数

const arrMethods = ["pop","push","shift","unshift","reserve","sort","splice"]

具体的思路可以如下实现：

问题分析：

1.数据量过大时，需要不断递归调用，性能不好，消耗较大

2.新增或删除属性无法监听

3.数组的响应式需要额外实现

4.修改语法的限制

Vue3.0的响应式原理

Vue3.0主要是通过ES6中的Proxy来拦截，在初始化时不会运