关注公众号,每天都能领外卖红包
关于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" />
// 创建虚拟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/