数据的代理

1.数据代理

(1)前言：数据代理就是通过vm对象来代理data对象中所有属性的操作。例如我们要访问vue中data的数据应该是vm.data.msg，访问vue中的方法应该是vm.methods.getMsg()，但是实际上我们直接使用vm.msg或者vm.getMsg()来访问data或者methods中的数据。这就是数据代理
(2)实现原理：遍历要代理对象的所有key，通过Object.defineProperty为vm对象添加同名的key属性，设置get方法和set方法来动态获取或者修改data对象的属性值

<script>
function MVVM (option) {
    //保存传入的配置
    this.$option = option
    //保存data对象
    var data = this._data = this.$option.data
    //遍历data中的所有key
    Object.keys(data).forEach(key => {
        //为vm添加与key相同属性,且配置相应的属性描述符
        Object.defineProperty(this,key,{
            configurable: false,//可重新定义
            enumerable: true,//可枚举
            get () {
                return this._data[key]
            },
            set (newVlue) {
                this._data[key] = newVlue
            }
        })
    })
}

//实例化
var vm = new MVVM({
    data: {
        msg:'Hello World'
    }
})

//vm.msg相当于调用get方法返回this._data[key]
console.log(vm.msg) //Hello World
//给vm.msg赋值相当于调用set方法，更新this._data[key]的值
vm.msg = "msg is change"
console.log(vm.msg) //msg is change
</script>