}
}
通过上面的代码可以看出了，为什么我们可以在
Vue实例上通过
this.$data拿到我们所写的
data数据。对数据已经进行了缓存之后，接下来要做的事情就是对数据进行观察，达到数据变化之后能够做出对
虚拟Dom的操作。
class QVue {
constructor(options){
this.$options = options;
// 数据响应
this.$data = options.data || {};
// 监听数据变化
this.observe(this.$data);
// 主要用来解析各种指令，比如v-modal，v-on:click等指令
new Compile(options.el,this);
// 执行生命周期
if(options.created){
options.created.call(this);
}
}
// 观察数据变化
observe(value){
if(!value || typeof value !== "object"){
return;
}
let keys = Object.keys(value);
keys.forEach((key)=> {
this.defineReactive(value,key,value[key]);
// 代理data中的属性到vue实例上
this.proxyData(key);
})
}
// 代理Data
proxyData(key){
Object.defineProperty(this,key,{
get(){
return this.$data[key];
},
set(newVal){
this.$data[key] = newVal;
}
})
}
// 数据响应
defineReactive(obj,key,val){
// 解决数据层次嵌套
this.observe(val);
const dep = new Dep();
Object.defineProperty(obj, key,{
get(){
// 向管理watcher的对象追加watcher实例
// 方便管理
Dep.target && dep.appDep(Dep.target);
return val;
},
set(newVal){
if(newVal === val){
return;
}
val = newVal;
// console.log(`${key}更新了：${newVal}`)
dep.notify();
}
})
}
}我们对
data数据中的每一项都进行了数据挟持，可是然而并没有什么卵用啊，我们并没有对相对应的
虚拟dom进行数据改变，当然我们肯定是不能把我们的需要更改的
虚拟dom操作写在这里，然而在
Vue中对其
Dom进行了特殊的处理，慢慢的向下看。想要做数据响应要做一个做具体更新的类何以用来管理这些观察者的类
// 管理watcher
class Dep {
constructor() {
// 存储
this.deps = [];
