手写vue响应式原理

响应式原理图：
1.通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持；

2.观察者模式（发布者-订阅者）
观察者(订阅者) – Watcher：
update()：当事件发生时，具体要做的事情

目标(发布者) – Dep:
①deps 数组：存储所有的观察者
②addDep()：添加观察者
③notify()：当事件发生，调用所有观察者（全部的依赖）的 update() 方法

3.当数据发生改变通过发布者订阅者模式来进行通知 进行界面刷新

直接看代码：

<script>
    //依赖
    let Dep = (function() {
   
   
      function Dep() {
   
   
        this.deps = [];  // 用来存储全部的依赖watcher
      };
      // 收集依赖
      Dep.prototype.addDep = function (watcher) {
   
   
        this.deps.push(watcher);
        console.log("收