关于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
```javascript
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" />
// 创建虚拟dom
createVdom(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
关注我的公众号，可以看更多优质文章哦，公众号刚建不久希望大家多多支持我一下，我也会努力更新更多好文章的 😊
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
