Vue监测数据原理

模拟Vue监测对象数据

以下代码简单展示了Vue中对象数据的监测原理。

let data = {
    name:"张三",
    age:18
}
const obs = new Observer(data);

let vm = {};
vm._data = data = obs;

function Observer(obj){
    const keys = Object.keys(obj);
    keys.forEach((key) => {
        Object.defineProperty(this,key,{
            get(){
                return obj[key];
            },
            set(val){
                obj[key] = val;
            }
        })
    })
}

Vue监测数据原理

1. Vue会监测data中所有层次的数据。
2. Vue是这样监视对象中的数据的：
   通过setter实现监视。如果需要给对象添加响应式属性，可使用API：Vue.set(target,key,value)或vm.$set(target,key,value)。
3. Vue是这样监测数组中的数据的：
   通过包裹更新数组元素的方法（如，push/pop/unshift/shift/splice/sort/reverse）实现。
   Vue其实做了两件事：
   1）调用数组原生的方法；
   2）更新解析模板，进而更新页面。
4. Vue中要更新数组元素，有以下两种方式：
   1）push/pop/unshift/shift/splice/sort/reverse
   2）Vue.set(target,key,value)或vm.$set(target,key,value)
5. 不能使用Vue.set(target,key,value)或vm.$set(target,key,value)给vm或vm根数据(如vm._data)添加属性。