关注公众号，每天都能领外卖红包
关于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 1data.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 => {// 创建虚拟domthis.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，收集当前数据绑定的虚拟domtarget && dep.addTarget(target);return val;},set (newVal) {if (newVal !== val) {val = newVal;// 数据变动通知当前数据的虚拟dom，然后更新虚拟dom对应的真实domdep.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;// 触发了观察者getthis.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');// 更新真实domthis.$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
