Vue的Object.defineProperty()方法

一、Object.defineProperty() 的作用

可以对添加的对象的属性添加一些高级的限制

let person = {
	name: '小明',
	sex: '男'
	// age: 18
}
Object.defineProperty(person,'age',{
	value: 18,
	enumerable: true, // 控制属性可以枚举,默认值是false
	writable: true, // 控制属性是否可以被修改，默认值是false
	configurable: true, // 控制属性是否可以被删除，默认值是false
	// 下面两个函数 将会在后面解释
	setter...,
	getter...
})

二、定义在Object.defineProperty()中的getter（get函数）

<script>
 let number = 18
 let person = {
    name: '小明',
    sex: '男',
    // age: 18
 }
 // 添加的属性不可遍历（为浅色）（不可枚举  zlzl）
 // 作用：可以对添加的对象的属性添加一些高级限制
 Object.defineProperty(person, 'age', {
      // value: 18,
      // enumerable: true, // 控制属性可以枚举,默认值是false
      // writable: true, // 控制属性是否可以被修改，默认值是false
      // configurable: true, // 控制属性是否可以被删除，默认值是false

      // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
      get: function() {
          console.log('有人读取age属性了');
          return number
      }
     })
     // 遍历person中的属性，输出一个数组
 console.log(Object.keys(person));
 console.log(person);
</script>

操作：使用Object.defineProperty() 方法，其中给person对象添加age方法，在其中定义getter（get函数）。
作用：
① 当读取person的age属性时，getter就会被调用，返回值为age的值。（先调用getter，再返回age的值。）
② 当将age的值设为变量number时，只有这种写法，将 number的值赋给age 写在getter中，才会使当修改number的值时，age的值也发生改变。

三、定义在Object.defineProperty() 中的setter（set函数）

let number = 18
let person = {
	name: '小明',
	sex: '男'
}
 Object.defineProperty(person, 'age', {
    // value: 18,
    // enumerable: true, // 控制属性可以枚举,默认值是false
    // writable: true, // 控制属性是否可以被修改，默认值是false
    // configurable: true, // 控制属性是否可以被删除，默认值是false

    // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
    get() {
        console.log('有人读取age属性了');
        return number
    },
    // 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
    set(value) {
		console.log('有人修改了age属性，且值是',value)
    }
})

由上述代码可见，set函数并没有修改成功age属性，后来获取的person.age的值仍然是18。
这是因为，age的值仍然依赖于上面的number变量，由于number变量的值没有变，所以person.age的值也没变。

那么我们需要怎么做，在age依赖变量number的情况下，才能成功修改age的值呢？相信聪明的小伙伴们已经想到了，那就是在setter中写这么一句：number = value，就能成功修改age的值了。

修改后代码产生的效果如下图所示：

相信聪明的小伙伴一眼就看出，这是不是和Vue的双向绑定是不是有些像呢？给大家留些悬念，我们下一期见 ~ ❀❀❀