学习VUE总得知道Object.defineProxy怎么使用吧

学习VUE总得知道Object.defineProxy怎么使用吧

工作归工作，不要觉得会用就完事了，很多时候得多看看基础。今天就专门讲一下Object.defineProxy是如何使用的，这样在以后讲到Vue2.X的源码时，就更容易理解了。

Object.defineProperty()方法可以直接在一个对象上定义一个新属性或者修改它的一个先有属性并返回此对象。

下面先举个例子示意下。

const obj = {};
const obj2 = Object.defineProperty(obj, 'property', {
  value: 42,
  writable: false
});
obj.property = 77;
console.log(obj); // {property: 42}
obj2.test = 3
obj2.property = 78;
console.log(obj) // {test: 3, property: 42}
obj.test = 5
console.log(obj2) //{test: 5, property: 42}

可以看出入参有三个，出参就是原对象（修改后的）

Object.defineProperty(obj, prop, descriptor)

入参中第一个参数，就是要修改的对象，第二个参数是要定义或修改的属性，第三个参数是对应的属性描述符号。前两个比较好理解，重点在于第三个参数。

属性描述符分为两类，一种是数据描述符一种是存取描述符。

数据描述符包含的属性有：configurable、enumerable、value、writable

存取描述符包含的属性有：configurable、enumerable、get、set

一个描述符不可能同时存在 value 或 writable 和 get 或 set

示例：

const obj = {};
const obj2 = Object.defineProperty(obj, 'property', {
 writable: false,
 get() {
  return 1
 }
});
console.log(obj2)

此时浏览器会报错：Invalid property descriptor. Cannot both specify accessors and a value or writable attribute

属性介绍：

• configurable

  当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。 默认为 false。

• enumerable

  当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。 默认为 false。

• value

  该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。 默认为 undefined

• writable

  当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符 (en-US)改变。 **默认为 false。

• get 相比直接使用value可以多一些运算在里面 默认值undefined
• set 相比直接赋值可以多一些函数进行处理 默认值undefined

几个简单示例:

const obj = {};
  const obj2 = Object.defineProperty(obj, 'property', {
   writable: false,
   value: 22
  });
  delete obj2.property
  console.log(obj2)
  //你会发现无法删除该属性

const obj = {};
  const obj2 = Object.defineProperty(obj, 'property', {
   get() {
​    return property
   },
   set(val) {
​    property = val + 1
   }/
   
  });
  obj2.property = 2
  console.log(obj2.property) 
  // 显示3 

这里值得注意的是set和get函数中的属性是如何设置或返回的。

简单用法就是这些，下一篇讲讲VUE是如何把它活用起来的。