学习vue实现双向绑定【附源码下载地址】

嘉宝 web前端开发

问题：我怎么才能收到你们公众号平台的推送文章呢？
答案：只需要点击标题下面的蓝色字【web前端开发】关注即可。

写在前面

几乎是所有人都知道 Vue 是一个双向绑定的前端框架，但只有部分人知道实现 Vue-1 （下文中的Vue 均为Vue1 ）是利用 defineProperty 来实现双向绑定的。

再次但是，只有部分的部分人，才知道 Vue 到底是如何利用 defineProperty 实现双向绑定的。

本文会带有一点解释，并用简单的例子实现一个 defineProperty 双向绑定。本文中可能会使用【可疑】这个字眼，代表这个函数很值得关注，别无他意。

先看看 Vue 是在哪里使用了defineProperty？

在源码中，发现了一个这样的函数，def()。这个函数里面包裹着我们最重要的api -- defineProperty。

/** * Define a property. * * @param {Object} obj * @param {String} key * @param {*} val * @param {Boolean} [enumerable] */function def(obj, key, val, enumerable) {  Object.defineProperty(obj, key, {    value: val,    enumerable: !!enumerable,    writable: true,    configurable: true  });}

defineProperty 的参数都是什么意思？

可是我们并看不懂源码里的defineProperty的参数是什么意思。所以我们去mdn上看看。

Object.defineProperty(obj, prop, descriptor)// obj: 需要定义的对象// prop: obj对象中，可能需要被定义(get)或修改(set)的属性名字// descriptor： 要定义(get)或修改(set)的obj的属性描述符// return : 这个方法 return 一个被传递给函数的对象，即 obj

展开说说 descriptor

什么是 descriptor 属性描述符?
属性描述符有两种主要形式：数据描述符和存取描述符。

数据描述符是指一个具有值 (任意js的数据类型、数组或函数) 的属性，该值可能是可写的，也可能是不可写的。如何记忆呢？其实很简单，顾名思义，数据描述符就是通过直接设定 value 的值，直接使得 obj 的某个属性有了值。

存取描述符是指用 getter 或 setter 函数来定义的属性。如何记忆呢？其实很简单，顾名思义，存取描述符就是通过存(set) 和取(get) ，使得 obj 的某个属性有了值。

描述符必须是这两种形式之一，但两者不能同时存在。

既属于数据描述符，又属于存取描述符的属性

属于数据描述符的属性

属于存取描述符的属性

正确的使用数据描述符的例子

var obj = {  test: 'hi' };console.log(obj.test); //  'hi'// 在调用defineProperty的时候 'hi' 已经被 'hello' 覆盖Object.defineProperty(obj, 'test', {    value: 'hello',    writable : true,    enumerable : true,    configurable : true})console.log(obj.test); //  'hello'obj.test = 'ohYeah...';console.log(obj.test); //  'ohYeah...'

正确的使用存取描述符的例子

var obj = {  test: 'hi' };var Value = 'yoho';console.log(obj.test); //  'hi'// 在调用defineProperty的时候 'hi' 已经被 'yoho' 覆盖Object.defineProperty(obj, 'test', {    get: function() {        // 每次调用obj.test的时候，就会取到 Value 当前的值        return Value;    },    set: function(newValue) {        // 在每次 obj.test = newValue 赋值的时候，其实就是给全局变量 Value 赋值。        // 以便下次调用 get 函数的时候能够取到当前最新的Value            Value = newValue;    },})console.log(obj.test); //  'yoho'obj.test = 'ohYeah...';console.log(obj.test); //  'ohYeah...'

同时存在数据描述符和存取描述符的错误例子

var Value = 'yoho';Object.defineProperty(obj, 'test', {    // 如果 value 属性同时和 get、set 使用，会报错如下    value: 'hello',    get: function() {        return Value;    },    set: function(newValue) {        Value = newValue;    },})

Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #at Function.defineProperty (<anonymous>) at defineproperty.html?_ijt=n8sr3j2ihna97pcm6gsgj9kk1m:29
意思就是，descriptor不合法，不能同时指定存取描述符和value。

回到 def 源码，重新认识 defineProperty

在源码中，有一个这样的函数，def()。这个函数里面包裹着我们最重要的api -- defineProperty。

// 利用了数据描述符的方式来定义一个对象 obj 的 key 属性的值为 val// 并且明确知道这个属性是可以被赋值运算符改变，并且是可删除、可修改的function def(obj, key, val, enumerable) {  Object.defineProperty(obj, key, {    value: val,    enumerable: !!enumerable,    writable: true,    configurable: true  });}

还有哪里也有 Object.defineProperty

在搜索的过程中，还发现了一个 defineReactive 函数里也有使用到 defineProperty，明显这个函数很可疑，因为它的名字中也有define，这个函数如下。

function defineReactive(obj, key, val) {   // 这里提到了一个 Dep 方法，他的实例 dep 在源码中频繁出现，注意点①  var dep = new Dep();  // .... 很多东西  // 这里提到了一个 observe 方法，看上去也是一个重要的监听函数，注意点②  var childOb = observe(val);  // 在这里使用了 defineProperty  Object.defineProperty(obj, key, {         // 定义了对象属性的可枚举，可修改或可删除的属性    enumerable: true,    configurable: true,    // 定义了存取描述符 get 和 set 函数的实现    get: function reactiveGetter() {      var value = getter ? getter.call(obj) : val;      // .... 一些判断后，最后得到了value      return value;    },    set: function reactiveSetter(newVal) {      var value = getter ? getter.call(obj) : val;      // 如果新值没有改变，则return；      if (newVal === value) {  return;  }      if (setter) {        setter.call(obj, newVal);      } else {        // 把新值赋值给 val            val = newVal;      }      // 调用了一个可以的名字为【观察】的可疑函数，并把新值传递出去       childOb = observe(newVal);      // 这个可疑的实例，调用了一个看上去是通知的方法      dep.notify();    }  });}

寻找注意点①，一个 Dep 构造函数

在源码中找到了 Dep 的实现过程：

var uid$1 = 0;// 每个 dep 实例都是可以显示观察到实例的变化的// 一个实例可以有多个订阅的指令function Dep() {  this.id = uid$1++;  // subs 用来记录订阅了这个实例的对象，  // 也就是说某个被监听的对象一发生变化，subs 里面的所有订阅者都会收到变化  this.subs = [];}// 当前这个的 target 是null，target 是全局的，而且是独一无二的// 可以通过 watcher 随时更新 target 的值Dep.target = null;// 接下来，这个实例有4个重要的方法，addSub  removeSub  depend  notify// 根据大神对方法的命名能够很容易猜测出方法的功能// 实现一个添加订阅者的方法 addSubDep.prototype.addSub = function (sub) {  this.subs.push(sub);};// 实现一个移除订阅者的方法 removeSubDep.prototype.removeSub = function (sub) {  this.subs.$remove(sub);};// 为target绑定 this 指向的方法 dependDep.prototype.depend = function () {  Dep.target.addDep(this);};// 通知所有订阅者新值更新的方法 notifyDep.prototype.notify = function () {  var subs = toArray(this.subs);  for (var i = 0, l = subs.length; i < l; i++) {    subs[i].update();  }};

在这里，我注意到了 Dep.target 这个属性。在源码中的注释中，我们了解到“可以通过 watcher 随时更新 target 的值”。所以我们来看看什么是watcher。

线索延伸，寻找 watcher

通过全局搜索 watcher，我发现搜索结果实在是太多了。所以我搜索了function watcher。此时答案只有一个，那就是 Watcher 构造函数。粗略的看了看，大概有一些get、set、beforeGet、addDep、afterGet、update、run 等等方法，相当复杂。但确实发现了 Watcher 能够修改 Dep.target 的方法。

Watcher.prototype.beforeGet = function () {  Dep.target = this;};

寻找观察点②，一个观察者的类 Observe

/** *  Observe 类会和每一个需要被观察的对象关联起来,  一旦产生关联,  被观察对象的属性值就会被 getter/setters 获取或更新 * 所以, 我们猜测这个类里一定会调用 Object.defineProperty */function Observer(value) {  this.value = value;  this.dep = new Dep();  // 这里调用了 def 函数，应证了我们的猜测，确实调用了 Object.defineProperty  def(value, '__ob__', this);  // ... 更多处理}// 接下来，这个实例有3个重要的方法，walk  observeArray  convert// walk 遍历对象，并将对象的每个属性关联到 getter/setters，// 这个方法只有在参数是一个对象时才能被正确调用。Observer.prototype.walk = function (obj) {  var keys = Object.keys(obj);  for (var i = 0, l = keys.length; i < l; i++) {    this.convert(keys[i], obj[keys[i]]);  }};// observeArray 遍历数组，监听数组里的每一个元素。Observer.prototype.observeArray = function (items) {  for (var i = 0, l = items.length; i < l; i++) {    observe(items[i]);  }};// convert  把传入的key value 和 getter/setter 关联起来，// 这样能在获取或更新属性的时候及时发送观察到的结果Observer.prototype.convert = function (key, val) {  // 在这里看到似曾相识的函数，可以回去前2个小节看看  defineReactive(this.value, key, val);};// ... more, 另外还有两个函数

但是全局搜索的时候，还发现了一个 observe 函数，也很可疑：

function observe(value, vm) {//....    ob = new Observer(value);// .... 最后return了一个 Observer 类的值  return ob;}

缺少一个导火索把一切线索串通起来

到现在为止，可以发现源码里的这些函数相互关联。线索就是按照下面的亮条路线串起来的。

observe方法 --- new ---> Observer类 --- 调用 ---> def方法 --- 使用了---> 描述符类型的 definePropertyobserve方法 --- new ---> Observer类，convert方法 --- 调用 ---> defineReactive方法 --- 使用了---> 存取描述符的defineProperty --- 同时实例化了dep ---> new Dep() ---> 可以被 Watcher 修改

到这里，就把刚刚解读的4段源码串了起来。他们的作用就是：① observe 负责监听数据的变化② 数据的获取和更新都使用 defineProperty③ Dep 负责管理订阅和发布

但还是少点什么，对，就是【数据从哪里来的？】，没有数据来源，有再完美的双向绑定也没用。

所以，我们来看看 Vue 的 data 部分会不会涉及到 observe我猜，就是 data --- 调用了---> observe方法

找到导火索 data

这里有一个小插曲，当你在 Vue 的文档中全局搜索 “data”，或者 “ vue” 这样的关键字的时候，你会发现 data 有140个记录，vue 有203个记录。这么找下去，真是无从下手。

由于我们前面预测了，是 data 去引发了线索，所以我推测，data 调用了 observer。所以我决定把搜索条件改成 “observer”。就容易多了，很快发现了一个可疑的函数 initdata。源码如下：

/*** Initialize the data. data的初始化*/Vue.prototype._initData = function () {    var dataFn = this.$options.data;    var data = this._data = dataFn ? dataFn() : {};    // ... 很多很多，对组件内外的prop、data做了各种规范和处理        // 重点出现了，调用了observe， 监听 data    observe(data, this);};

这个 _initData 在 _initState 被使用：

  /**   * 给实例构造一个作用域,  其中包括:   * - observed data 监听data       * - .....   */Vue.prototype._initState = function () {    // ...    this._initData();    // ...};这个 _initState 在 _init 被使用：Vue.prototype._init = function(options) {    // ...    // 初始化数据监听，并初始化作用域    this._initState();    }

最后 _init 被 Vue 调用，

function Vue(options) {  this._init(options);}

到此为止，我们得到了最终的结论

Vue实例 ---> data ---> observe方法 ---> Observer类 ---> def方法 ---> definePropertyVue实例 ---> data ---> observe方法 ---> Observer类-convert方法 ---> defineReactive方法 ---> defineProperty ---> new Dep() 订阅类 ---> 可以被 Watcher 修改

模仿思路，实现一个简陋的双向绑定

先模仿 Vue 创建一个构造函数

回忆一下 Vue 是如何实例化的？

var V = new Vue({    // el 简化为所指定的id        el: 'app',    data: { ... }})

由此可见，在实例化的时候，有两个重要的参数，el 和 data。所以，先虚拟一个构造函数。

function Vue(options) {    this.data = options.data;    var id = options.el;}

构造函数的参数有了，但是构造函数有什么功能呢？第一个功能应该能够解析指令，编译dom。回想一下平时写dom的时候，v-model，v-show，v-for。这些都是最常用的指令，并且直接写在dom上，但是实际渲染的html上并不会出现这些指令，为什么呢？因为被编译了。谁编译了？Vue的构造函数负责编译。

给构造函数增加一个编译的方法

function Vue(options) {    // ... 一些参数    var id = options.el;    // 利用 nodeToFragment 生成编译后的dom    var dom = nodeToFragment(document.getElementById(id),  this);    // 把生成好的 dom 插入到指定 id 的 dom 中去（这里简化id的处理）    document.getElementById(id).appendChild(dom);}

上文中提到了一个 nodeToFragment 方法，这个方法其实是利用createDocumentFragment来创造一个代码片段。不了解 Fragment 的同学可以自行搜索了解一下。

 function nodeToFragment (node, vm) {    var flag = document.createDocumentFragment();    var child;    while (child = node.firstChild) {        compile(child, vm); // 调用 compile 解析 dom 属性        flag.appendChild(child); // flag 不断填充新的 child 子节点    }    return flag;}function compile (node, vm) {    if (node.nodeType === 1) {        // 如果 node 是一个元素，解析他的所有属性        var attr = node.attributes;        for (var i = 0; i < attr.length; i++) {            if (attr[i].nodeName == 'v-model') {                // 简化，只对 v-model 属性做处理，对这个 dom 赋值                var name = attr[i].nodeValue;                node.value = vm.data[name];                node.removeAttribute('v-model');            }        }    }    if (node.nodeType === 3) {        // 如果 node 是文本节点，并且使用 {{...}} 赋值(简化操作)，则对文本节点赋值        if (/\{\{(.*)\}\}/.test(node.nodeValue)) {            var name = RegExp.$1; // 获取到正则的第一个捕获组的值            name = name.trim();            node.nodeValue = vm.data[name]; // 将data 赋值给 该文本节点        }    }}

对比一下 dom 的编译前后。

根据之前的线索，构造一个 observe 方法

根据前面的结论，我们知道 observe 方法实际上就是一个监听函数。应该在data被确定后调用，所以在 Vue 的构造函数里。

  function Vue(options) {    this.data = options.data;    var data = this.data;    // 调用 observe 方法来监听 data 里的数据    observe(data, this);    // ...}

observe 方法接受两个参数。遍历 data，获得属性，调用 defineReactive

function observe(objs, vm) {    Object.keys(objs).forEach(function (key) {        defineReactive(vm, key, objs[key]);    })}

实现一个 defineReactive 方法

defineReactive 在本文的比较前面提到，这个方法是使用了defineProperty 这个方法的可疑函数。我们的 observe 中调用了它，所以现在也需要实现一下。

function defineReactive (obj, key, val) {    // 这个函数就一个作用，调用了Object.defineProperty    Object.defineProperty(obj, key, {        get: function() {            return val;        },        set: function (newVal) {            if (newVal === val) return;            val = newVal;        }    })}

我们知道，只要 obj 的 key 的值被赋值了，就会触发 set 方法。所以，当一个被 v-model 绑定了的 input 的值在变化时，应该就是出发 set 的最佳时机。那么在编译 dom 的时候，就需要提前给 dom 绑定事件。

function compile (node, vm) {    if (node.nodeType === 1) {        var attr = node.attributes;        for (var i = 0; i < attr.length; i++) {            if (attr[i].nodeName == 'v-model') {                var name = attr[i].nodeValue;                // 简化操作，明知只有 input 一个dom， 直接绑定                // 给相应的data属性复制, 从而触发defineProperty的set                node.addEventListener('input', function (e) {                    vm[name] = e.target.value;                })                // 将data的值赋给该node                node.value = vm[name];                node.removeAttribute('v-model');            }        }    }    // ....}

根据之前的线索，需要一个订阅者的类 Dep

function Dep () {    this.subs = [];}// 主要实现两个方法： 新增订阅者 & 通知订阅者Dep.prototype = {    addSub: function(sub) {        this.subs.push(sub);    },    notify: function() {          this.subs.forEach(function(sub) {            sub.update();        });    },}

需要在 defineProperty 的时候设置订阅者。如果每次新增一个双向绑定的 get，都需要新增订阅者，每一次被双向绑定的 set 一次，就需要通知所有订阅者。所以需要修改一下 defineReactive 方法。

function defineReactive (obj, key, val) {    var dep = new Dep();    Object.defineProperty(obj, key, {        get: function() {            // 增加一个订阅者            if (Dep.target) dep.addSub(Dep.target);            return val;        },        set: function (newVal) {            if (newVal === val) return;            val = newVal;            // 作为发布者发出通知            dep.notify();        }    })}

此时，我们还需要补充一下 Watcher 类。专门用来改变 Dep.target 的指向。

function Watcher(vm, node, name, nodeType) {    Dep.target = this;    this.name = name;    this.node = node;    this.vm = vm;    this.nodeType = nodeType;    this.update();    Dep.target = null;}Watcher.prototype = {    get: function () {        this.value = this.vm[this.name];    },    update: function () {        this.get();        // 简化操作，在编译函数中传入写死的参数        if (this.nodeType == 'text') {            this.node.nodeValue = this.value;        }        if (this.nodeType == 'input') {            this.node.value = this.value;        }    }}

这个 Watcher 的作用就是，实际上实现被订阅者的获取和订阅者的更新的方法。

function compile (node, vm) {    if (node.nodeType === 1) {        //...                    // vm: this 指向； node: dom节点；         // name: v-model绑定的属性名字; 'input'： 简化操作，写死这个dom的类型        new Watcher(vm, node, name, 'input');    }    if (node.nodeType === 3) {        if (/\{\{(.*)\}\}/.test(node.nodeValue)) {            //...                    // 原本给文本节点赋值的方式是利用了 defineProperty 的 get            // node.nodeValue = vm[name];  // 将data 赋值给 该文本节点                // 现在改为利用 Watcher，如果被订阅者变化了，直接update            // 其中，name: {{}} 指定渲染绑定的属性; 'text'： 简化操作，写死文本节点的类型            new Watcher(vm, node, name, 'text');        }    }}

模仿后的总结

我们的模仿大约经历了以下几个过程第一步：创建一个构造函数Vue，并在构造函数中定义参数第二步：构建一个函数nodeToFragment, 能够把带指令的 dom 转化为 html5 的 dom第三步：nodeToFragment实际上是调用了compile， compile方法解析指令的属性并就进行赋值第四步：在构造函数Vue中增加一个监听方法observe，它接受构造函数Vue中的data作为参数，并为每个参数实现双向绑定。第五步：observe中调用了defineReactive，这个方法使用了 Object.defineProperty 来设置的数据的getter、setter。第六步：需要在compile触发setter，所以在compile中给输入框绑定事件第七步：虽然能够触发setter，但是显示的数据并没有触发getter。所以需要构造一个订阅类Dep，主要实现增加订阅者 & 通知订阅者两个方法。以便在 Object.defineProperty 的 setter 中触发通知函数 notify第八步：实现Dep的通知订阅者方法(notify)，需要借助Watcher类，Watcher 中的 updata方法为每一个订阅者提供更新操作。第九步：需要在compile的时候为每一个订阅者实例化Watcher，所以，需要在compile中触发Watcher。传入相应的参数，让Watcher能够在update的时候正确赋值。

源码下载地址：链接: https://pan.baidu.com/s/1ggWkh3d 密码: 97kk

学习vue实现双向绑定【附源码下载地址】