Object.defineProperty 方法的重要性
Vue底层很多地方都会用到 Object.defineProperty方法,例如:
- 数据劫持
 - 数据代理
 - 计算属性
 
defineProperty 直译: 给 方法 定义 属性。
源码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>回顾Object.defineproperty方法</title>
    </head>
    <body>
        <script type="text/javascript" >
            let number = 18
            let person = {
                name:'张三',
                sex:'男',
                //错误写法举例: 这种写法只会在一开始会把number的值18给age, 如果以后number值变的话并不会同步给age.
                //age:number
            }
            //为 person 对象定义一个属性 age :    //这种方法虽然麻烦,但是比较高级:从控制台可以到后添加的 age属性的颜色淡一些(表示不可以枚举)。
            //
            Object.defineProperty(person,'age',{
                // value:18,
                //控制属性:
                // enumerable:true,     //控制属性是否可以枚举,默认值是false
                // writable:true,         //控制属性是否可以被修改,默认值是false
                // configurable:true     //控制属性是否可以被删除,默认值是false
                //★★★
                //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
                //get:function 函数名(){} 的缩写形式: //去掉 : ,然后去掉 function, 去掉 函数名
                get(){
                    console.log('有人读取age属性了')
                    //返回上面变量number的值:
                    return number
                },
                //★★★
                //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
                set(value){
                    console.log('有人修改了age属性,且值是',value)
                    //修改上面变量number的值:
                    number = value
                }
            })
            // console.log(Object.keys(person))    // Object.keys() 功能:可以把传入的参数对象中的所有属性名提取出来变为一个数组。
            //功能: 遍历 person 对象中每个属性的属性值.
            //此处可以验证:日志中无法看到 通过 Object.defineProperty(person,'age',{ value:18}) 添加的属性值18 。 原因:Object.defineProperty() 追加的属性无法被枚举(即 不能被遍历)。
            for(let key in person)
            {
                console.log('@', person[key])
            }
            console.log(person)
        </script>
    </body>
</html>
                    