vue中的对象数据是怎么被监听的

在vue2中，数据监听是用过Object.defineProperty这个API来实现的，我们可以来看一个例子

var text = 'vue';
const data = {};
Object.defineProperty(data, 'text', {
    get() {
        return text;
    },
    set(newVal) {
        text = newVal;
    }
});
data.text // 'vue'
data.text = 'react' // 'react'

当我们访问或设置对象的属性的时候，都会触发相对应的函数，然后在这个函数里返回或设置属性的值。我们当然可以在触发函数的时候做我们自己想做的事情，这也就是“劫持”操作。

在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作，并创建一个监听器，当数据发生变化的时候发出通知。

var data = {
    name:'hello',
    age:18
}

Object.keys(data).forEach(function(key){
    Object.defineProperty(data,key,{
        enumerable:true, // 是否能在for...in循环中遍历出来或在Object.keys中列举出来。
        configurable:true, // false，不可修改、删除目标属性或修改属性性以下特性
        get:function(){
            console.log('获取数据');
        },
        set:function(){
            console.log('监听到数据发生了变化');
        }
    })
})；
data.name //控制台会打印出 “获取数据”
data.name = 'world' //控制台会打印出 "监听到数据发生了变化"