1.MVVM是什么？
响应式，双向数据绑定，即MVVM。是指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式框架。它包括：
1.修改View层，Model对应数据发生变化。
2.Model数据变化，不需要查找DOM，直接更新View。
2.实现方式
Vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
3.实现
1）实现Observe
使用Object.definProperty()实现Observe()方法对_data数据进行劫持
// 数据劫持
function Observe(data) {
for (let key in data) { // 循环
let val = data[key];
observe(val); // 属性值有可能是对象，递归调用
Object.defineProperty(data, key, { // 数据劫持
configurable: true,
enumerable: true,
get() {
return val;
},
set(newVal) {
if (val === newVal) return;
observe(newVal); // 设置新的属性值时也要进行数据劫持
val = newVal;
},
});
}
}
function observe(data) {
if (typeof data !== "object") return; // 不是对象不劫持
return new Observe(data);
}
2）实现数据代理
！！！用vm实例对象来代替_data, 对_data中的数据进行操作
function Vue(options = {}) {
this.$options = options;
let data = (this._data = this.$options.data());
// 数据劫持
observe(data);
// 数据代理
Object.keys(data).forEach((key) => {
Object.defineProperty(this, key, {
configurable: true,
enumerable: true,
get() {
return this._data[key]; // 代理
},
set(newVal) {
this._data[key] = newVal; // 代理
},
});
});
// 数据编译
new Compile(options.el, this);
}
3) 实现模板编译Compile
解析模板指令 即：{{data数据}}，将模板中的变量解析成数据，并渲染到视图上
// 编译
function Compile(el, vm) {
vm.$el = document.querySelector(el);
let fragment = document.createDocumentFragment(); // 文档碎片
while ((child = vm.$el.firstChild)) { // 将dom元素放入文档碎片中
fragment.appendChild(child);
}
replace(fragment);
function replace(fragment) { // 替换data数据
Array.from(fragment.childNodes).forEach((node) => {
let text = node.textContent; // 获取{{}}
let reg = /\{\{(.*)\}\}/; // 匹配正则
if (node.nodeType === 3 && reg.test(text)) { //正则匹配且dom元素为文本
let val = vm;
let arr = RegExp.$1.split(".");
arr.forEach((k) => {
val = val[k];
});
if (node.childNodes) replace(node);
});
}
vm.$el.appendChild(fragment);
}
4） 实现发布订阅
维护一个数组，用于收集订阅者（Watcher）；当数据发生改变时，调用 notify，从而触发订阅者的 update()，完成视图跟新。
// 发布订阅
function Dep() {
this.subs = [];
}
Dep.prototype.addSub = function (sub) {
this.subs.push(sub); // 收集订阅
};
Dep.prototype.notify = function () {
this.subs.forEach((sub) => sub.update()); // 通知watcher，调用update()
};
5）实现Watcher
当数据改变时触发watcher的update()，让视图跟新。
// watcher
function Watcher(vm, exp, fn) { // vm：vue实例，exp：匹配正则{{}}，fn为回调函数即update方法
this.fn = fn;
this.vm = vm;
this.exp = exp;
Dep.target = this
let val = vm;
let arr = exp.split(".");
arr.forEach((k) => {
val = val[k];
});
Dep.target = null
}
// update
Watcher.prototype.update = function () {
let newVal = this.vm;
let arr = this.exp.split(".");
arr.forEach((k) => {
newVal = newVal[k];
});
this.fn(newVal);
};
！！！在compile中添加Watcher
// 编译
function Compile(el, vm) {
vm.$el = document.querySelector(el);
let fragment = document.createDocumentFragment();
while ((child = vm.$el.firstChild)) {
fragment.appendChild(child);
}
replace(fragment);
function replace(fragment) {
Array.from(fragment.childNodes).forEach((node) => {
let text = node.textContent;
let reg = /\{\{(.*)\}\}/;
if (node.nodeType === 3 && reg.test(text)) {
let val = vm;
let arr = RegExp.$1.split(".");
arr.forEach((k) => {
val = val[k];
});
// -----------------------------------------------添加观察者
new Watcher(vm, RegExp.$1, function (newVal) {
node.textContent = text.replace(reg, newVal); // 跟新视图
});
//------------------------------------------------添加观察者
node.textContent = text.replace(reg, val);
}
if (node.childNodes) replace(node);
});
}
vm.$el.appendChild(fragment);
}
！！！在observe中收集订阅者
function Observe(data) {
let dep = new Dep() // ----------收集订阅者
for (let key in data) {
let val = data[key];
observe(val);
Object.defineProperty(data, key, {
configurable: true,
enumerable: true,
get() {
Dep.target && dep.addSub(Dep.target) // --------获取数据时收集订阅者
return val;
},
set(newVal) {
if (val === newVal) return;
observe(newVal);
val = newVal;
dep.notify() // --------------设置数据时通知订阅者跟新视图
},
});
}
}
以上完成简易的mvvm模型
总结
MVVM原理就是利用observe对数据进行劫持（Object.definpropety），然后通过compile编译模板指令（ ''{{ }}'' ）；并使用发布订阅模型进行数据和视图的双向绑定。
参考文章：
