vue3中的响应式原理

在讲vue3的响应式之前，先简单说一下vue2的响应式原理。

对象类型：通过Object.defineProperty()对属性的读取丶修改进行拦截（数据劫持）

数组类型：通过重写更新数组的一系列方法来实现拦截。

vue2的响应式会存在下列的问题：

1.新增属性，或者删除属性，界面不会更新

2.直接通过下标修改数组，界面不会自动更新

我们来验证一下：

点击按钮的时候往对象里面添加年龄属性，这时候我们看到浏览器的控制台已经打印出了obj.sex为女。说明我们已经往obj对象上面添加了属性。但是页面上并没有发生改变。原因是vue监测不到。

 解决办法：利用$set

代码：

效果图：

 再次添加一个按钮，点击删除obj下面的name属性。可以看到，页面上面依旧没有发生变化。

代码：

效果图：

解决办法：利用$delete

代码：

效果图：

接下来说一下数组。如果要改变数组里面的值。利用索引是没有效果的。页面不会发生改变。

代码：

 效果图：

 解决办法有两种：

1.$set()

2.splice()

代码：

效果图：

以上就是vue2响应式原理，以及一些问题的解决方案。

接下来我们来说一下vue3的写法

安装最新版本脚手架：

npm install -g @vue/cil

这里简单介绍一下setup.

1.它是vue3.0中的一个新配置，值为一个函数

2.组件里面用到的数据，方法，都配置在setup中。（就是data和methods）

3.setup函数有两种返回值。若返回一个对象则对象中的属性，方法，在模板中都可以直接使用。还有一种，返回一个渲染函数，则可以自定义渲染内容。

代码：

效果图：

4.使用setup的时候，有以下几点需要注意：

• 不要与vue2的配置混用。如果混用，在vue2的data，methods中可以访问到setup中的属性，方法。但是在setup里面不能访问到vue里面的配置。如果vue2和vue3的配置有重名，setup里面的配置优先。
• setup不能是一个async函数，因为返回值不再是return的对象，而是一个promise，模板看不到return对象中的属性。

一样是添加两个按钮，分别是添加性别和删除年龄以及修改爱好。在vue3中直接obj.sex和delete obj.age以及数组的索引就可以对obj这个对象进行添加，修改以及删除，并且更新到页面上。这都得益于reactive。

代码：

效果图：

 

 

vue3的响应式原理

实现原理：

• 通过Proxy（代理）：拦截对象中任意属性的变化，包括属性的读写，属性的添加，属性的删除等。
• 通过Reflect（反射）：对源对象的属性进行操作

先来讲下Proxy的基本用法：

 在讲一下Reflect(反射的意思)，首先定义一个对象obj，obj下面有a，两个属性。一般我们要读取a属性，会用obj.a来实现。其实还有另外一种方式。就是Reflect。Reflect.get(obj,'a')

 vue3实现响应式原理就是利用了Reflect

总结一下，vue2实现原理主要依靠Object.defineProperty。而vue3则是引用了Proxy来做代理。