[JavaScript知识库]vue中的属性代理

问题：在我们平时使用vue的过程中，例如获取下面name的操作为this.name,但从下面的结构中，难道不应该是:this.$data.name来获取？

实际上就是通过属性代理来实现的。

 data() {
    return {
      name:'',
    };
  },

案例如下：

let vm={
    data:{
        name:'马冬梅'
    }
}

最终实现的效果实现访问：vm.name=‘马冬梅’

let vm={
    data:{
        name:'马冬梅'
    }
}

Object.keys(vm.data).forEach(key=>{
    //为vm定义了key属性和值
    Object.defineProperty(vm,key,{
        enumerable:true,
        configurable:true,
        // 找vm要key的值，则返回vm.data[key]的值。
        get(){
            return vm.data[key];
        },
        // 为vm设置key的值，则给vm.data[key]设置值。
        set(newValue){
            console.log("要设置值了");
            vm.data[key] = newValue;
        }
    })
})
// 访问vm.name
console.log(vm.name);
// 给vm.name设置值
vm.name="马什么？"
//  打印出vm.name值
console.log(vm.name);
// 打印出vm.data.name值
console.log(vm.data.name);
// 打印出vm的值
console.log(vm);

在控制台打印结果如下：