vue2和vue3响应式的原理

vue2

原理：在vue2中利用的是原生js下边的Object.defineProperty()进行数据劫持，在通过里面的getter和setter方法，进行查看和数据的修改，通过发布、订阅者模式进行数据与视图的响应式。

1.定义初始数据

 2.加工数据：为了实现响应式，在javascript中Object.defineProperty()给每个初始数据都形成了get和set的写法，只要读取数据就会执行get方法，编辑数据执行set方法。

（1）、 定义响应式数据

（2）、get 查看age属性 执行get

 （3）、set   修改数据的时候调用set

（4）、当数据发生变化时 触发响应的监听回调（get/set），就已经实现了数据的双向绑定.

3、vue2双向绑定的缺点 

（1）、不能监听对象的新增属性和删除属性

（2）、无法正确的监听数组的方法，当监听的下标对应的数据发生改变时

4、解决方法

（1）、重写数组或者对象

（2）、vue中 通过this.$set(目前属性，新增的属性，新增的值)来解决  注 括号是三个参数

vue3

基本原理：

1、对于基本数据类型来说，响应式依然是靠Object.defineProperty()的get和set来完成的

2、对于对象类型的数据：

• 通过Proxy代理：拦截对象中任意属性的变化，包括属性值得读写、添加、删除等操作等..
• 通过Reflect反射函数进行操作

vue3中响应式是通过函数来实现的

1.ref函数

• 作用：定义一个响应式数据
• 语法：let   xxx = ref(xxx)
• 
• 创建一个包含响应式数据的引用对象
• js中操作数据：xxx.value
• 
• 模板中读取数据：不需要 .value 直接使用插值语法即可
• 注：接收的数据可以是基本类型也可以是对象类型 

 2.reactive函数

1、作用：定义一个对象类型的响应式数据（基本数据类型 最好用ref函数）

2、语法：const xxx = reactive（源对象）接收一个数组或者对象，返回一个Proxy的实例对象，简称Proxy对象

返回proxy对象 

•  reactive定义的响应式的数据是深层次的
• 接受的是数组，通过索引改变的数据也是响应式的