双向绑定
Vue 用着最舒服的地方,想必就是它的双向绑定机制,不过在搞清楚这方点之前,举个最简单的例子回顾下 Vue 双向绑定的表象。
无论是从输入框输入,还是从 Vue 开发工具中编辑,都会发现数据和页面展示是同步的,而 Vue 实时监听页面和数据的变化,打通双向通道的核心,其实只是 defineProperty 这一个 js 原生方法。
那就先来说说这个 defineProperty 的功能:
1.可以直接在一个对象上定义一个新属性。
2.可以直接修改一个对象的现有属性。
Object.defineProperty(object, prop, descriptor)共有三个参数:
object:需要操作的对象。
prop:需要操作的属性名。
descriptor:属性描述符,描述操作属性取值,以及是否可以修改、删除、迭代。
比如定义一个 author 对象,希望可以动态新增一个 name 属性,值为书雁祉,就可以使用 defineProperty。
let author = {};
Object.defineProperty(author, "name", {
value: "书雁祉",
writable: false,
configurable: false,
enumerable: false,
});
value:指定属性值。
writable:指定属性值是否可修改,默认值为 false 不可修改。
configurable:指定属性是否可删除,默认值为 false 不可删除。
enumerable:指定属性是否可迭代,默认值为 false 不可迭代。
除此之外,defineProperty 还可以传入 get、set 方法用来监听属性,在获取 / 修改对象的属性值时,会自动调用 get / set 方法,但传入 get、set 时,不可传入 value、writable。
let author = { name: "书雁祉", age: 14 };
for (let key in author) {
let syz = author[key];
Object.defineProperty(author, key, {
configurable: false,
enumerable: false,
get() {
console.log("get");
return syz;
},
set(value) {
if (value !== syz) {
console.log("set");
syz = value;
}
},
});
}
在 Vue 中,为方便管理代码,Vue 使用了一个 Observe 类专门来处理对象的监听,在初始化类时将需要监听的对象传入即可。defineRecative 中,this.observer(old)是考虑到对象的属性值也可能是对象,this.observer(value)则是考虑到赋值时可能赋值一个对象,这两种情况都需要监听。
class Observer {
constructor(data) {
this.observer(data);
}
observer(object) {
if (object && typeof object === "object") {
for (let key in object) {
this.defineRecative(object, key, object[key]);
}
}
}
defineRecative(object, attr, old) {
this.observer(old);
Object.defineProperty(object, attr, {
get() {
console.log("get");
return old;
},
set: (value) => {
if (value !== old) {
console.log("set");
this.observer(value);
old = value;
}
},
});
}
}
let author = {
name: {
family: "书",
first: "雁祉",
},
pet: "neko",
};
new Observer(author);
回到创建 Vue 实例的代码,由此可以分析出:
1.Vue 是一个类,构造函数接收一个对象。
2.类会将 el 指定的 dom 元素作为根节点,将 data 中的属性值编译渲染到该节点上。
3.el 可以使 id 名,也可以是 dom 元素。
4.vue 会将 dom 与 data 分别绑定到$el 和$data 上
{{ name }}
由此,定义一个 Sue 类来实现与 Vue 相似的效果。
1.首先将 dom 元素和 data 都绑定在实例的$el 和$data 上,nodeType === 1 代表 el 为 dom 元素。
2.如果 dom 元素存在,根据指定的 dom 节点,定义 Compier 编译类,利用 data 渲染节点。
class Sue {
constructor(options) {
if (options.el.nodeType === 1) {
this.$el = options.el;
} else {
this.$el = document.getElementById(options.el);
}
this.$data = options.data;
if (this.$el) {
new Compiler(this);
}
}
}
class Compiler {
constructor(vm) {
this.vm = vm;
}
}
在写编译类前,需要了解一点,Vue 在解析节点时,不会每解析到一个需要渲染 data 的位置就更新一遍 dom 树,dom树更新会十分耗时且耗费浏览器性能,Vue 会将 dom 树放在内存中,将 data 渲染到内存中的虚拟 dom 树上,再将虚拟 dom 一次性渲染到界面中。
那么如何构建虚拟dom树,方法其实有很多,Vue 才用了 js 内置的 DocumentFragment 来构建。
class Compiler {
constructor(vm) {
this.vm = vm;
const fragment = this.createFragment(vm.$el);
console.log(fragment);
}
createFragment(app) {
const fragment = document.createDocumentFragment();
const node = app.firstChild;
while (node) {
fragment.appendChild(node);
node = app.firstChild;
}
return fragment;
}
}
注意:DocumentFragment 调用 appendChild 后,该 dom 元素会从 dom 节点中消失,所以取 firstChild 即可取到第一个。
{{ name }}
可见,虚拟 dom 已经写入内存,sue 实例上的 data 也分别挂载了 dom 元素和 data。下一步则需要解析解析虚拟 dom 树,渲染 $data 中的数据。
1.遍历虚拟 dom,判断当前遍历到的是元素节点还是文本节点。
2.元素节点则需获取属性名和属性值,判断有没有 v-* 属性(如 v-model),同时将节点继续传入 buildFragment 处理子节点。
3.文本节点则需判断内容有没有 {{}}。
class Compiler {
constructor(vm) {
this.vm = vm;
const fragment = this.createFragment(vm.$el);
this.buildFragment(fragment);
}
createFragment(app) {
const fragment = document.createDocumentFragment();
let node = app.firstChild;
while (node) {
fragment.appendChild(node);
node = app.firstChild;
}
return fragment;
}
buildFragment(fragment) {
for (let node of fragment.childNodes) {
if (node.nodeType === 1) {
this.buildElement(node);
this.buildFragment(node);
} else {
this.buildText(node);
}
}
}
buildElement(node) {
for (let attr of node.attributes) {
let { name, value } = attr;
if (name.startsWith("v-")) {
console.log("元素", node, attr, name, value);
}
}
}
buildText(node) {
let content = node.textContent;
const regexp = /\{\{.+?\}\}/gi;
if (regexp.test(content)) {
console.log("文本", content);
}
}
}
考虑到 v-* 属性的多样性,Vue 才用了一个专门用来处理指令的 CompilerUtil 对象,包含所有需要处理的属性对赢得方法,这里取其中几种举例。
1.对于 v-model,通常用在 input 中,所以只需设置节点的 value 为对应 $data 的属性值,最后在 constructor 中将 fragment 渲染到页面即可。
2.但只是这样会出现问题,比如对应 $data 的属性值是一个对象,而渲染的是该对象的属性值,则无法正确获取到,所以在 CompilerUtil 中定义 GetValue 函数,专门用来获取对应的属性值。
const CompilerUtil = {
GetValue(value, vm) {
const realValue = value.split(".").reduce((data, key) => {
console.log("GetValue", data, key);
return data[key];
}, vm.$data);
return realValue;
},
model(node, value, vm) {
node.value = this.GetValue(value, vm);
},
};
class Compiler {
constructor(vm) {
this.vm = vm;
const fragment = this.createFragment(vm.$el);
this.buildFragment(fragment);
vm.$el.appendChild(fragment);
}
createFragment(app) {
const fragment = document.createDocumentFragment();
let node = app.firstChild;
while (node) {
fragment.appendChild(node);
node = app.firstChild;
}
return fragment;
}
buildFragment(fragment) {
for (let node of fragment.childNodes) {
if (node.nodeType === 1) {
this.buildElement(node);
this.buildFragment(node);
} else {
this.buildText(node);
}
}
}
buildElement(node) {
for (let attr of node.attributes) {
let { name, value } = attr;
if (name.startsWith("v-")) {
const directive = name.split("-")[1];
CompilerUtil[directive](node, value, this.vm);
}
}
}
buildText(node) {
let content = node.textContent;
const regexp = /\{\{.+?\}\}/gi;
if (regexp.test(content)) {
console.log("文本", content);
}
}
}
{{ name }}
再用 v-html 和 v-text 示范,原理相似,分别修改元素的 innerHTML 和 innerText 为对应属性值。
const CompilerUtil = {
GetValue(value, vm) {
const realValue = value
.split(".")
.reduce((data, key) => data[key], vm.$data);
return realValue;
},
model(node, value, vm) {
node.value = this.GetValue(value, vm);
},
html(node, value, vm) {
node.innerHTML = this.GetValue(value, vm);
},
text(node, value, vm) {
node.innerText = this.GetValue(value, vm);
},
};
{{ name }}
Part 1就先示范这么多,等有闲情逸致了再写Part 2。