响应式数据的实现挺简单的,简单模拟一下。
<script>
const data = {
foo:"hello",
bar:"world"
}
const vm = Object.create(null);
vm._data = data;
const keys = Object.keys(data);
keys.forEach(key => {
Object.defineProperty(vm,key,{
configurable:true,
enumerable:true,
get(){
return vm._data[key];
},
set(val){
vm._data[key] = val;
}
});
})
console.log(data.foo,vm.foo);
data.foo = 'good';
console.log(data.foo,vm.foo);
vm.foo = "nice";
console.log(data.foo,vm.foo);
</script>
//index.js
import Vue from "vue";
import Helloworld from "./src/helloworld.vue";
const data = {
foo:"hello",
bar:"world"
}
const vm = new Vue({
render:(h) => h(Helloworld),
data:data
}).$mount("#root");
console.log(vm.$data == data);//返回true
console.log(vm.$el);//<ul>...<ul>
vm.$watch("foo",function(newValue,oldValue){
console.log(newValue,oldValue);//输出 "excellent" "hello"
});
vm.foo = "excellent";
vm.$data
和data
指向同一引用,所以vm.$data===data
返回true
。vm.$el
vue实例
挂载的DOMvm.$watch()
vm.$watch("foo",fn)
,即监控vm.foo
,一旦有变化,就会触发函数fn
。