实现vue数据双向绑定

  关注公众号，每天都能领外卖红包

关于vue数据双向绑定也是面试很喜欢问的题目了，这里讲下实现方式，效果图、源码、demo在文章末尾

首先看下vue的基本结构

<div id="app">    <div>{{a.b.c}}</div></div>

new Vue({    el: '#app',    data: {        a: { b: { c: 1 } }    },});

上面是一个非常非常简单的模板，我们来一步步达到数据双向绑定的效果

数据劫持：

export class Observer {    observe (data) {        for(const key in data) {            let val = data[key];            // 递归劫持子对象            this.observe(val);            Object.defineProperty(data, key, {                enumerable: true,                configurable: true,                get () {                    console.log('get', val);                    return val;                },                set (newVal) {                    if (newVal !== val) {                        console.log('set', val);                        val = newVal;                    }                }            })        }    }}

创建一个观察者类用来劫持data数据，使用Object.defineProperty劫持data中的对象，并通过递归的方式劫持对象中的子对象(如果是数组则劫持改变数组的函数比如splice、push等这里不展开)

举个例子，如果对data中的数据赋值会触发set，取值会触发get

 const data = {     a: { b: { c: 1 } } }; const observer = new Observer(); observe(data);  const n = data.a.b.c // 触发get打印 get 1 data.a.b.c = 2 // 触发set打印 set 2

解析模板：

解析{{}}中的数据，创建它们的AST抽象语法树，比如

 <div>{{a.b.c}}</div>

那解析成简单AST长这个样子，也是我们所称之为的虚拟dom

 {     el: $el,     variable: 'a.b.c',     value: 1,     vue }

el就是该虚拟dom所对应的真实dom(这里就是对应这个div了)，variable存储绑定的变量字符串，value存储绑定变量的值，vue存储vue实例，如何变成这个样子呢，继续往下

 compile(node) {      const reg = /(?<=\{\{)[^\}\}]+/g;      for (let i = 0; i < node.childNodes.length; i++) {          const childNode = node.childNodes[i];          // 文本节点并且匹配{{}}          if (this.isTextNode(childNode) && reg.test(childNode.textContent)) {              childNode.textContent.match(reg).forEach(val => {                  // 创建虚拟dom                  this.createVdom(childNode, null, val);              });          }          // 如果存在子节点继续递归解析          if (childNode.childNodes && childNode.childNodes.length) {              this.compile(childNode);          }      }  }   // 判断当前节点类型  isTextNode(node) {      return node.nodeType === 3;  }

compile方法传入一颗dom树(vue中绑定的是#app)，对这颗树循环和递归，解析出各个子节点，由于双括号{{}}属于文本节点，需要做一层判断是否属于文本节点，之后调用createVdom方法创建对应的虚拟dom

 createVdom(node, dir, variable) {      const vdom = new VDom(this.vue, node, dir, variable);
      // 将虚拟dom和观察者中的数据关联起来      vdom.bindObserver();
      // 更新数据      vdom.update();  }

创建虚拟dom，传入的参数分别为vue实例、虚拟dom对应的真实dom、指令(如果没有则为null，{{}}传null，如果是v-model就传v-model字符串)、绑定的变量。所以双大括号的需要传给虚拟dom的值长这样

<div>{{a.b.c}}</div>

const vdom = new VDom(this.vue, $div, null, 'a.b.c');

之后分别触发虚拟dom的bindObserver、update方法，现在看下VDom这个虚拟dom类的实现，我们一步步分析

let target = null;
const parsePath = path => {    const p = path.split('.');    return data => {        p.forEach(val => {            data = data[val];        });        return data;    };};
export class VDom {    constructor(vue, node, dir, variable) {        this.vue = vue;        this.$el = node;        this.dir = dir;        this.variable = variable;        this.value = null;    }
    // 触发Observer get，将数据和dom关联    bindObserver() {        target = this;        this.setValue(parsePath(this.variable)(this.vue.$data));        target = null;    }
    setValue(val) {        this.value = val;    }
    update() {        const reg = new RegExp(`{{${this.variable}}}`, 'g');        this.$el.textContent = this.value;    }}
export { target };

先是第一个方法bindObserver，他的作用是用来将当前虚拟dom和观察者数据联系在一起，在细说他的作用之前我们先改造一下观察者代码的get方法

import { Dep } from "./Dep.js";import { target } from './VDom.js';
export class Observer {    constructor () {}
    // 数据监听    observe (data) {        if (!data || typeof data !== 'object') {            return;        }
        for(const key in data) {            // 为每个数据创建一个收集对应虚拟dom的类            const dep = new Dep();            let val = data[key];            this.observe(val);
            Object.defineProperty(data, key, {                enumerable: true,                configurable: true,                get () {                    // target是虚拟dom，收集当前数据绑定的虚拟dom                    target && dep.addTarget(target);                    return val;                },
                set (newVal) {                    if (newVal !== val) {                        val = newVal;                        // 数据变动通知当前数据的虚拟dom，然后更新虚拟dom对应的真实dom                        dep.notify(newVal);                    }                }            })        }    }}

观察者类中增加target和Dep，target作用是用来和虚拟dom中bindObserver方法相关联，贴下VDom.js下的相关代码

 // 当前都在VDom.js下let target = null;
const parsePath = path => {    const p = path.split('.');    return data => {        p.forEach(val => {            data = data[val];        });        return data;    };};...export class VDom {...    bindObserver() {         target = this;         // 触发了观察者get         this.setValue(parsePath(this.variable)(this.vue.$data));         target = null;    }         setValue(val) {         this.value = val;    }...}
export { target };

执行bindObserver方法会先把this赋值给target，然后调用parsePath方法，parsePath方法的作用是把虚拟dom所绑定的变量解析，举个例子

dom上双括号绑定一个变量

<div>{{a.b.c}}</div>

new Vue({    data: {        a: { b: { c: 1 } }    }});

可以看出绑定变量是a.b.c，解析成虚拟dom后，variable变量就为字符串'a.b.c'(前面说过variable参数用来存储绑定的变量是一个字符串), 之后调用this.setValue(parsePath(this.variable)(this.vue.$data));相当于

this.setValue(parsePath('a.b.c')({ a: { b: { c: 1 } } }));

parsePath方法相当于从对象{ a: { b: { c: 1 } }中取值，取什么值呢，取a.b.c的值，再看下setValue方法

setValue(val) {     this.value = val;}

所以这部操作相当于

this.value = a.b.c;

相当于另this.value为1.在梳理一下上述流程，把真实dom上绑定的变量a.b.c，通过解析，变成真实的a.b.c的值，将这个值赋值给value，这里有个巧妙的点，由于这个操作是赋值操作，所以同时也触发了变量a.b.c观察者的get方法，如下

get () {    target && dep.addTarget(target);    return val;},

由于之前给target赋值

target = this;

值为当前a.b.c对应的虚拟dom，所以会调用dep.addTarget(target);收集到a.b.c对应的一个虚拟dom，为什么说是一个呢，因为a.b.c可能出现在多个dom上绑定着，像这样

<div>{{a.b.c}}</div><button>{{a.b.c}}</button>

收集完依赖后将target置为null，防止触发get又重复收集，之后调用虚拟dom下的update方法更新真实dom

现在看下Dep收集类的实现

export class Dep {    constructor() {        this.vdoms = [];    }
    // 将vdom添加进来    addTarget(vdom) {        this.vdoms.push(vdom);    }
    // 更新视图    notify(newVal) {        // 一个数据可能被多个dom绑定        this.vdoms.forEach(vdom => {            vdom.setValue(newVal);            vdom.update();        });    }}

可以看到target触发get的时候会去收集虚拟dom，当数据修改的时候会触发set，通知所有虚拟dom更新对应的真实dom，下面是更新真实dom的方法

update() {    const reg = new RegExp(`{{${this.variable}}}`, 'g');    // 更新真实dom    this.$el.textContent = this.value;}

v-model的实现也是同理，只不过需要判断一下v-model是在元素节点上的

// if (this.isElementNode(childNode) && node.hasAttribute('v-model')) {    this.createVdom(node, 'v-model', node.getAttribute('v-model'));}
// 判断是元素节点isElementNode(node) {    return node.nodeType === 1;}

可以看到和双括号一样，只不过多取一次v-model对应的变量，而且取更容易，因为我们有getAttribute方法，多传一个变量dir用来标识，dir为'v-model'字符串，在贴一下创建虚拟dom的代码，和刚才双括号一毛一样

<input v-model="number" />

// 创建虚拟domcreateVdom(node, dir, variable) {    const vdom = new VDom(this.vue, node, dir, variable);    vdom.bindObserver();    vdom.update();    // 指令解析并绑定成事件    vdom.bindEvent();}

相当于

const vdom = new VDom(this.vue, $input, 'v-model', 'number');

细心的朋友会发现，这里多一个方法bindEvent，由于v-model的双向绑定是由input框中的onInput事件达到，所以在生成虚拟dom的时候需要追加一步操作，如下

bindEvent() {    if (this.dir === 'v-model') {        this.$el.addEventListener('input', e => {            this.vue.$data[this.variable] = e.target.value;        });    }}

在input输入的时候触发onInput事件，更新vue data中的数据，达到双向绑定，下面贴一张效果图

demo地址: http://139.9.192.234:5555/

源码地址: https://github.com/hhzzcc/MVVM