Vue的数据代理知识点

<script src="./vue.js"><script>
<script>
	var number = 19;
	let person = {
		name:"黑崎一护",
		gender:"男"
    }
	Object.defineProperty(person,'age',{
		//给person对象增添了age属性，并进行设置
		value:18,
		//person对象的age属性不具有枚举性，所以无法通过遍历person的属性获取age值
		enumerable:true,//使person对象具有枚举性
		writeable:true,//使得person.age属性具有可写的性质,在控制台可以person.age = 10进行修改
		configurable:true,//使得person.age属性可以被删除,默然是false不可被删除的。可以通过控制台delete person.age测试
		/*如果采用上面传统的第一个方法，那么我们的person值将会被写死，不会因为number的改变而改变了，因为代码从上往下，只会执行一次，所以仅仅是在赋值的时候，让number变量和person.age产生了关系。我们可以用这个新方法，让数据双向改变
            */
        //当有人读取person.age的时候，getter的值就会被调用。这个getter可以通过number来改变
         get:function(){
              return number;
    	 },
    	 //可以直接通过person.age = 23来修改值了
         set:function(value){
             console.log("修改了person.age为",value);
             number = value;
         }
	})
</script>

 <script>
        //数据代理：用一个对象代理另一个对象的属性的操作
        let obj = {x:100};
        let obj2 = {y:200};
        Object.defineProperty(obj2,"x",{
            //当我访问obj2的x属性时候，返回的是obj.x的值
            get(){
                return obj.x;
            },
            set(value){
                obj.x = value;
            }
            //当我在控制台测试，obj2.x = 30的时候，obj.x的值也会被改变
            
        })
    </script>