写这篇文章的初衷是想让只有javascript基础的朋友们也能看懂vue3的响应式原理，开始打工。
要了解vue3响应式是干啥的，我们先看官方的定义
官方给的介绍是：Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。
那按照我的理解就是数据驱动视图，我们从后台返回的数据有变化时，视图会进行更新
是不是很简单，这篇文章到这结束了！
怎么可能，定义介绍完了，我们当然是要扒拉原理的！那它是怎么实现的，且往下瞅…
vue3的响应式实现是发布订阅者模式+数据劫持(proxy)
为了好理解我画了草图，主打潦草
懵了吧，看不懂不要紧，我们先一点一点来
首先要搞懂这俩样的定义
发布订阅者模式
举例说明；比如你有一双新发布的耐克的球鞋你想买，你到专卖店一问，店主说不好意思缺货，你舍不得这个鞋子，这时候店主说你关注我们店公众号，到货了通知你，你于是兴高采烈的走了，然后断断续续的，都有人喜欢这个新品，关注了公众号，过了一周，公众号发消息说店铺到货了，有想买的可以来了，你唰就过去抢鞋子了
这种一对多的关系就叫做发布订阅者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于他的对象都将得到通知。
- 谁是一？是不是店主
- 谁是多？是不是等待鞋子的人
- 你和别的抢鞋子的人是不是互不认识？但是不影响你们收到同一条通知对吧
- 更改的数据或者状态是什么？不就是我们的鞋子从缺货变成了有货么
- 那我们怎么获取消息的？是不是公众号发的通知
- 加群就是我们给数据绑定reactive、ref的方法，不关注公众号，你去哪里听消息
那发布订阅者模式主在vue的响应中做了什么，
在 Vue 中，每个响应式变量都有相应的监控，它会在变量渲染的过程中把属性记录为依赖，之后当依赖项被调用时，会通知监控重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式。
那怎么实现变量出现变化，从而页面变化呢，这就要说到数据拦截了
vue3中数据拦截是通过proxy实现的，proxy做了什么呢？
做了数据拦截，在数据展示在页面之前我们可以对数据进行获取和修改，而且这个方法的触动是自发性的，即数据改变，proxy的set方法就会自动触发，进而处理数据
那怎么把数据变成proxy对象，在vue3中，
reactive和ref就是把普通的数据变成proxy对象，ref封装了一个把基本数据类型包装成proxy，而reactive封装的是更加深层次的对象或者数组，将引用数据类型包装成proxy
按照我的理解，数据拦截就是我们案例当中，公众号的消息在输入编辑的时候，我们是不是可以修改添加删除文字，等我们确定了文字，然后一键发送，这是通知，那我们编辑的过程，就是数据拦截
你可以简单理解为我给变量绑定了两方法，一旦变量有个风吹草动，我完全可以获取到。
拦截就是我们在页面发送到页面之前，进行了处理，这下是不是简单多了
这个时候好多人迷糊，我直接绑定响应式，或者数据拦截就行了，我为什么需要发布订阅式
那这个时候就是业务需要了，在页面当中有个地方是
我今年{{age}}岁
而有的地方就是
我今年{{age}}岁,我明年就是{{age+1}}岁啦
你绑定了age是会改变的，但是age+1是不会改变的
let obj={age:3};
let obj2={age:obj.age+1};
var proxy = new Proxy(obj, {
get(val){
console.log('get')
}
});
console.log('obj.age',obj.age)
console.log('obj2.age',obj2.age)
setTimeout(() => {
obj.age="18";
console.log('obj.age',obj.age)
console.log('obj2.age',obj2.age)
}, 3000);
最终呈现
能理解吧，你在age上面实例了Proxy对象，你在age+1上面可没有哦，它可不会实时响应你的数据。
所以这个时候我们需要发布订阅式，它做了很多事情，其中一件就是让我们所有绑定响应式的数据，在页面当中的所有计算，都做出响应。
简单来说，vue3中，原生变量不具备响应模式，只有被reactive或者ref方法包裹的变量，才会被实例Proxy对象，而
reactive 通过在 Proxy get 方法中收集依赖，一旦变量改变，就会在 set 方法中触发依赖，所有和变量相关或者依赖变量进行计算进行展示的数据，都会同步变化。
好，那我们再看最上面的草图，是不是能帮助理解原理呢
好，以上是我的理解，欢迎指正
