Object.defineproperty方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <h1>名称:{{name}}</h1>
        <h1>學校:{{address}}</h1>
        <!-- Vu而对象的属性都可以打印 -->
        <h1>學校:{{age}}</h1>
        <h1>學校:{{$options}}</h1>
   </div>
    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        let number = 18
        let person = {
            name:'张三',
            sex:'楠'
         //   age:18,
        }
        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true, //控制属性是否可以枚举,默认值false
            // writable:true, //控制属性是否被修改 默认值false
            // configurable:true,//控制属性是否可以被删除,默认值false。
            //当有人读取person的age属性时,get函数会被调用,切返回值就是age的值。
            get(){
                // 每次读取的时候都会返回number,即使numnber发生改变。
                console.log('读取')
               return number
            },
            //当有人我修改person的age属性时,set函数会被调用,切回收到修改的具体值。
            set(value){
                console.log('写入')
                number = value
            }
        })
        console.log(person)
        console.log(person.age)
        person.age = 19;
    </script>
</body>
</html>

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）


let obj = { x: 100 }
let obj2 = { y: 200 }

Object.defineProperty(obj2, 'x', {
  get() {
    return obj.x
  },
  set(value) {
    obj.x = value
  }
})

1 Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）  
2 Vue中数据代理的好处：更加方便的操作data中的数据  
3基本原理  
       a通过object.defineProperty()把data对象中所有属性添加到vm上  
       b为每一个添加到vm上的属性，都指定一个 gettersetter  
       c在gettersetter内部去操作（读/写）data中对应的属

Vue将data中的数据拷贝了一份到_data属性中，又将_data里面的属性提到Vue实例中（如name），通过defineProperty实现数据代理，这样通过geter/setter操作 name，进而操作_data中的 name。而_data又对data进行数据劫持，实现响应式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id="root">
        <h1>名称:{{name}}</h1>
        <h1>學校:{{address}}</h1>
   </div>

    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
            name:'哈哈',
            address:'尚硅谷'
            }
        })
    

    </script>
</body>
</html>

05 数据代理

Object.defineproperty方法