【vue】响应式数据实现原理2

响应式数据的实现挺简单的，简单模拟一下。

<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实例挂载的DOM
• vm.$watch()
vm.$watch("foo",fn)，即监控vm.foo，一旦有变化，就会触发函数fn。