示例图：
1. html部分
<body>
<div id="app">
<h3>name: {{name}}</h3>
<h3>info.a: {{info.a}}</h3>
<div>name的值：<input type="text" v-model="name"></div>
<div>info.a的值：<input type="text" v-model="info.a"></div>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
name: 'zs',
age: 20,
info:{
a:'a1',
b:'b1'
}
}
})
console.log(app);
</script>
</body>
2. js部分
class Vue{
constructor(options){
this.$data = options.data;
// 调用数据劫持的方法
Observer(this.$data);
//属性代理
Object.keys(this.$data).forEach((key) => {
Object.defineProperty(this,key, {
enumerable: true,
configurable: true,
get(){
return this.$data[key];
},
set(newVal){
this.$data[key] = newVal;
}
})
});
Compile(options.el, this);
}
}
// 定义一个数据劫持的方法
function Observer(obj){
// 这是递归的终止条件
if (!obj || typeof obj !== 'object') return
const dep = new Dep();
// 通过Object.keys(obj)获取到当前obj上的每个属性
Object.keys(obj).forEach((key) => {
//当前被循环的key所对应的属性值
let value = obj[key];
// 把value这个子节点，进行递归
Observer(value);
// 需要为当前的key所对应的属性，添加getter和setter
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get(){
// console.log(`有人获取了${key}的值：`);
//return this.$data[key];
Dep.target && dep.addSub(Dep.target);
return value;
},
set(newVal){
//this.$data[key] = newVal;
value = newVal;
Observer(value);
// 通知每一个订阅者更新自己的文本
dep.notify()
}
})
})
}
function Compile(el, vm){
// 获取el对应的dom元素
vm.$el = document.querySelector(el);
// 创建文档碎片，提高dom操作的性能
const fragment = document.createDocumentFragment();
while((childNode = vm.$el.firstChild)){
fragment.appendChild(childNode);
}
// 进行模板编译
replace(fragment);
vm.$el.appendChild(fragment);
// 负责对dom文档进行编译的方法
function replace(node){
// 定义匹配插值表达式的正则
const regMustache = /\{\{\s*(\S+)\s*\}\}/;
// 证明当前node节点是一个文本子节点，需要进行正则替换
if (node.nodeType === 3) {
// 文本子节点也是一个dom对象
// 要获取文本子节点的字符串内容，需要调用textContent属性获取
const text = node.textContent;
//console.log(text);
// 进行字符串的正则匹配与提取
const execResult = regMustache.exec(text);
// console.log(execResult);
if (execResult) {
const value = execResult[1].split('.').reduce((newObj,key) => newObj[key], vm);
// reduce(function(total, currentValue), initialValue)
//initialValue: 可选，传递给函数的初始值
//const value = execResult[1].split('.').reduce((newObj,key) => {return newObj[key]}, vm);
node.textContent = text.replace(regMustache, value);
// 创建 Watcher 类实例
new Watcher(vm, execResult[1], (newVal)=> {
node.textContent = text.replace(regMustache, newVal);
})
}
// 终止递归的条件
return;
}
// 判断当前的 node 节点是否为 input 输入框
if (node.nodeType === 1 && node.tagName.toUpperCase() === 'INPUT') {
// 得到当前元素的所有属性节点
// attributes：返回指定节点的属性集合
const attrs = Array.from(node.attributes);
const findResult = attrs.find((x) => x.name === 'v-model');
if (findResult) {
// 获取当前v-model属性的值
const expStr = findResult.value;
// 根据v-model属性的值查找到他们对应的内容
const value = expStr.split('.').reduce((newObj,k) => newObj[k], vm);
node.value = value;
new Watcher(vm, expStr, (newVal) => {
node.value = newVal;
});
// 监听文本框的 input 输入事件，拿到文本框最新的值，把最新的值，更新到 vm 上即可
node.addEventListener('input', (e) => {
const keyArr = expStr.split('.');
const obj = keyArr.slice(0, keyArr.length - 1).reduce((newObj, k) => newObj[k], vm);
const leafKey = keyArr[keyArr.length - 1];
obj[leafKey] = e.target.value;
})
}
}
// 如果不是文本节点，是一个dom元素，就需要进行递归处理
node.childNodes.forEach((child) => replace(child));
}
}
// 创建收集的类
class Dep{
constructor(){
// 所有的watcher都要存放在这个数组中
this.subs = [];
}
// 向subs数组中，添加watcher的方法
addSub(watcher){
this.subs.push(watcher);
}
// 负责通过每个watcher的方法
notify(){
this.subs.forEach((watcher) => watcher.update());
}
}
// 订阅者类
class Watcher{
constructor(vm, key, cb){
this.vm = vm;
this.key = key;
this.cb = cb;
console.log(key);
// 下面三行代码负责把创建的watcher实例存到dep实例的subs数组中
Dep.target = this;
// 进行取值操作不是为了真的为了取值，而是为了进入getter方法里
// 把创建的watcher实例存到dep实例的subs数组中
key.split('.').reduce((newObj, k) => newObj[k], vm);
Dep.target = null;
}
//watcher的实例，需要有 update 函数，从而让发布者能够通知订阅者进行更新
update(){
const value = this.key.split('.').reduce((newObj, k) => newObj[k], this.vm);
this.cb(value);
}
}