手摸手教你实现一个简单vue（1）响应式原理

写在前面

1202年了，再实现一款mvvm框架有咩用啊？其实...确实....没咩用。你写的再好也难卷的过已经相当成熟的vue,react等等框架，但是对个人而言，自己实现一个简单版vue一定会加深你对源码的原理的理解，这么看来还是有点意义的。

最终版效果：

实现功能：

声明式渲染 {{message}}
条件渲染 v-if
列表渲染 v-for
事件处理 v-on
组件渲染 <component></component>

框架特点:

使用typescript+webpack构建
框架直接操作真实dom而没有用到vdom
只实现了vue的部分功能，因为事无巨细全部实现的话有点搬砖。
不像vue2.x的缺陷,moush-vue内数组可通过下标索引完成视图更新

关于没有vdom：这也是vue1.x和2.x的区别，但没有vdom也完全不影响你理解vue原理，因为理解了1.x的原理，2.x无非就是在原来的基础上增加了vdom和相关的diff算法而已。

演示:

template:

  <div id="app">
    <div class="ageContent">
      <p>
        {{name}}的年龄是{{age}}
      </p>
      <ul>
        <li v-for="item in arr">
          {{item}}
        </li>
      </ul>
      <button v-on:click="addFunc">addFunc</button>
      <coma v-if="isShow"></coma>
    </div>
复制代码

typescript:

const app = new moushVue({
    el: "#app",
    data: function () {
      return {
        age: 1,
        name: "小明",
        isShow: true,
        arr:[1,2,3,4,5,6,7,8,9,10,11],
      };
    },
    methods:{
       addFunc:function(){
         this.arr[0]++
       },
       switchIsShow:function(){
         this.isShow=!this.isShow
       }
    },
    components: {
      coma: {
        template: `<h1 class="com" v-bind:test="appName">局部组件{{appName}}自身属性:{{appAttr}}</h1>`,
        data: function () {
          return {
            appName: "moush",
            appAttr:"attr",
          };
        },
      },
    },
  });
复制代码

点击addFunc按钮列表中·1会++，浏览器视图也会相应更新

项目的地址： github.com/moushicheng…
骗个star不过分吧

主流程

 class moushVue implements VM{
  $options: any;
  $data: any;
  $el: HTMLElement;
  $parentVm: VM;
  $childrenVm: VM[];
  $methods:any
  $oldNode:any;
  constructor(options: OPTIONS) {
    this.$options = options;
    this.init();
    this.mount();
    this.observe();

  }
  protected init() {
    new init(this);
  }
  protected mount() {
    this.$options.beforeMount.call(this);
    this.$el =
      typeof this.$options.el == "string"
        ? document.querySelector(this.$options.el)
        : this.$options.el;
    this.$options.mounted.call(this);
  }
  protected observe() {
    new Observer('$data',this.$data,this); //使data内部数据可观测
    new Complier(this); //分析el内部节点并生成相应watcher
  }
}
复制代码

我们先不用在意函数细节做了什么，笼统认知一下，且看constructor内部分别干了三件事：
this.init();初始化一些数据

this.mount(); 将用户传进来的el挂载
this.observe(); 将数据变的可观测并执行编译前两者比较简单，我们的核心就是搞懂observe中

  new Observer('$data',this.$data,this); //使data内部数据可观测
  new Complier(this); //分析el内部节点并生成相应watcher
复制代码

到底干了什么

响应式原理

要监控一个对象（这里把Array和Object都称为对象）内部的数据变化，我们就不得不用到一些手段,vue2.x用到了Object.defineProperty这个api来实现监控数据，但我们的框架并不是这样，因为这样做无法监控

 arr[0]=1;
复制代码

数组下标索引带来的变化。在我们的框架中，用到了es6的Proxy代理对象来监控对象变化下面你可以尝试一下把这段代码复制到浏览器控制台，然后进行一些简单的调试体验一下Proxy

    const obj={a:1}
    const proxy = new Proxy(obj, {
      get(obj, property) {
        console.log('@get:'+property)
        return obj[property];
      },
      set(obj, property, value) {
      console.log('@set:'+property+value)
        obj[property] = value;
        return true;
      },
    });
   //调试
   proxy.a=2 //@set:a2
   proxy.a  //@get:a
复制代码

那么要对vue中data选项进行数据监控怎么做呢？那当然如出一辙用到Proxy，在数据更新的时候，在Proxy get中顺便通知依赖更新就行了
那么什么又是依赖呢？这个不太好解释，笼统的讲就是跟数据直接相关的HTML 如：

<div>
{{message}}
</div>

new moushVue({
...
data:{
  message:"Hello,world"
}
...
})
复制代码

清晰一点讲就是我们内部构建的Watcher对象，通知依赖更新，就是通知Watcher执行它的update方法，update方法会直接操作dom更新视图，对不同的模板会有不同的操作（不同的回调cb），这和我们主流程中Complier编译有关，它会根据HTML创建不同类型的cb来为数据更新进行服务:

class Watcher {
    vm:VM
    cb:Function;
    getter:any;
    value:any;
    
    constructor (vm,initVal,expOrFn,cb) {
      this.vm = vm;
      this.cb = cb;
      if(isType(expOrFn,'String'))this.getter = parsePath(expOrFn)
      else if(isType(expOrFn,'Function'))this.getter=expOrFn
      this.value = this.get() //收集依赖
      this.value=initVal
    }
    get () {
      window.target = this;
      let value = this.getter(this.vm.$data)
      window.target = undefined;
      return value
    }
    update () {
      const oldValue = this.value
      // this.value = this.get() //更新时不要触发getter否则会收集依赖
      this.value = this.getter(this.vm.$data)
      this.cb.call(this.vm, this.value, oldValue)
    }
  }
复制代码

关于get，依赖收集，我们很快就会提到。好，那么让我们回到数据监控

Observer

observer就是一个侦测器，它会深度递归将选项data内部的所有数据都进行监控。

class Observer{
  $value: any;
  $parent: any;
  $key:string
  dep: any;
  constructor(key,value, parent) {
    this.$key=key;
    this.$value = value;

    this.$parent = parent;

    this.dep = new Dep();

    def(value, "__ob__", this); //相当于this.__ob__=value
    this.walk(value);
    this.detect(value, parent);
  }
  private walk(obj: Object | Array<any>) {
    for (const [key, val] of Object.entries(obj)) {
      if (typeof val == "object") {
        //同时判断数组和对象
        new ObserverNext(key,val, obj);
      }
    }
  }
  private detect(val: any, parent: any) {
    const dep = this.dep
    const key=this.$key
    const proxy = new Proxy(val, {
      get(obj, property) {
        if (!obj.hasOwnProperty(property)) {
          return;
        }
        dep.depend(property);
        return obj[property];
      },
      set(obj, property, value) {
        obj[property] = value;

        dep.notify(property);
        if(parent.__ob__)parent.__ob__.dep.notify(key)

        return true;
      },
    });

    parent[this.findKey(parent, val)] = proxy;
  }
  //通过对象和对象内的某个值发现指向这个值的键（key）
  //比如obj.a=1,findKey(obj,1) =>返回a
  private findKey(obj, value, compare = (a, b) => a === b) {
    return Object.keys(obj).find((k) => compare(obj[k], value));
  }
}
复制代码

每个对象的数据监控都需要有一个dep,dep是什么？因为一个数据可能会对应多个依赖，所以必须要把数据对应的所有依赖都做一个统一管理，这个统一管理就由dep来实现。
observer的主流程，初始化，创建dep，然后walk（递归分析对象内部是否有嵌套对象，有的话就将嵌套对象也进行监控。

walk(obj: Object | Array<any>) {
    for (const [key, val] of Object.entries(obj)) {
      if (typeof val == "object") {
        //同时判断数组和对象
        new ObserverNext(key,val, obj);
      }
    }
  }
复制代码

然后是侦测detect

 private detect(val: any, parent: any) {
    const dep = this.dep
    const key=this.$key
    const proxy = new Proxy(val, {
      get(obj, property) {
        if (!obj.hasOwnProperty(property)) {
          return;
        }
        dep.depend(property);
        return obj[property];
      },
      set(obj, property, value) {
        obj[property] = value;

        dep.notify(property);
        if(parent.__ob__)parent.__ob__.dep.notify(key)

        return true;
      },
    });
    parent[this.findKey(parent, val)] = proxy;
  }
复制代码

先把val（传进来的对象）进行代理（proxy），然后在get中收集依赖dep.depend 在set中通知依赖更新dep.notify，更新的时候同时会做一层穿透通知父对象也进行更新。最后

parent[this.findKey(parent, val)] = proxy;
复制代码

在将父对象中引用我们新侦测对象改为代理器。这样便能将整个对象都变成响应式

总结一下,Observer的作用就是深度递归分析对象内部的所有数据，并进行侦测，在内部数据更新时通知代理器使dep更新，在获取内部数据的时候就会通知代理器使dep进行依赖收集。

dep

接下来让我们分析一下dep，因为源码很简单，所以直接上源码

 class depNext {
  subs: Map<string, Array<Watcher>>;
  constructor() {
    this.subs = new Map();
  }

  addSub(prop, target) {
    const sub = this.subs.get(prop);

    if (!sub) {
      this.subs.set(prop, [target]);
      return;
    }
    sub.push(target);
  }
  // 添加一个依赖
  depend(prop) {
    if (window.target) {
      this.addSub(prop, window.target); //不要奇怪window.target后续会讲
    }
  }
  // 通知所有依赖更新
  notify(prop) {

    const watchers = this.subs.get(prop);
    if(!watchers)return;
    for (let i = 0, l = watchers.length; i < l; i++) {
      watchers[i].update();
    }
  }
}
复制代码

注意到subs是一个Map对象，它会映射对象内所有的数据，每个映射的数据都对应一个依赖数组。这就是上文说的一个数据可能对应多个依赖

依赖收集

依赖收集简单的来说就是，在获取数据的时候收集依赖再次贴一下Observer中的源码

const proxy = new Proxy(val, {
      get(obj, property) {
        if (!obj.hasOwnProperty(property)) {
          return;
        }
        dep.depend(property);
        return obj[property];
      },
      set(...){...}
    });
复制代码

数据获取的时候，看到了吗，dep.depend收集了依赖，然后在依赖收集器dep中，将对应的依赖添加到依赖数组中 dep中是这么收集的 this.addSub(prop, window.target);

window.target实际上就是watcher的实例，在创建watcher的时候，watcher会把自己赋予到全局window.target中，然后去获取一下数据，数据代理器（Proxy）就会dep.depend，收集这个watcher了。

watcher中依赖收集
    get () {
      window.target = this;
      let value = this.getter(this.vm.$data)
      window.target = undefined;
      return value
    }
复制代码

this.getter在构造器中被parsePath所创建,parsePath会把一个形如'data.a.b.c'的字符串路径所表示的值，从真实的data对象中取出来，这样就完成了依赖收集

  /**
   * Parse simple path.
   * 把一个形如'data.a.b.c'的字符串路径所表示的值，从真实的data对象中取出来
   * 例如：
   * data = {a:{b:{c:2}}}
   * parsePath('a.b.c')(data)  // 2
   */
export function parsePath(path) {
  const bailRE = /[^\w.$]/;
  const segments = path.split(".");
  return function (obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return;
      if (bailRE.test(segments[i])) {
        //this.arr[0]  this[arr[0]]
        const match = segments[i].match(/(\w+)\[(.+)\]/);
        obj = obj[match[1]];
        obj = obj[match[2]];
        continue;
      }
      obj = obj[segments[i]];
    }
    return obj;
  };
}

复制代码

总结

Observer深度递归分析选项data内部的数据，使其具有响应性。
observer实例内部的dep负责统一管理依赖， 在获取数据时，dep会收集依赖，在数据更新时，dep会通知依赖更新
而依赖就是watcher,它负责具体的更新视图，通过调用其上的cb（回调函数）。
watcher更新视图所调用的cb都在Complier编译构建时决定，这一点会在后续的文章中讲解。

想具体了解上述过程可以点击，直接看项目源码
github.com/moushicheng…