前言

在vue2.x版本官网文档中
深刻响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中，Object.defineProperty将申明响应式 property数据的状态转换为getter和setter。

Object.defineProperty根本应用和概念

官网解释的概念是

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Object.defineProperty() 办法会间接在一个对象上定义一个新属性，或者批改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)obj: 要在其上定义属性的对象prop: 要定义或批改的属性的名称或Symboldescriptor: 定义或批改的属性的描述符* @descriptor** configurable    为 true 时，属性能力从新被定义,默认为 false。* enumerable    为 true 时，该属性才可能呈现在对象的枚举属性中，此时能力通过for in遍历属性。默认为 false。* writable    为 true 时，value属性值能力被批改。默认为 false，此时value属性值为只读状态。* value    该属性对应的初始值。能够是任何无效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。* get    一个给属性提供 getter 的办法，如果没有 getter 则为 undefined。当拜访该属性时，该办法会被执行。默认为 undefined。* set    一个给属性提供 setter 的办法，如果没有 setter 则为 undefined。当属性值批改时，触发执行该办法。该办法将承受惟一参数，即该属性新的参数值。默认为 undefined。* 注意事项：get 和 set 它们与value和writable是互斥的。一旦应用它们，则这个属性就没有保留属性值的能力

Object.defineProperty新增对象属性

let userInfo = {  age: "11",};console.log("初始userInfo：", userInfo);// Object.defineProperty新增对象属性Object.defineProperty(userInfo, "name", {  value: "zhangsan",  enumerable: true, //将enumerable设为true 才可能呈现在对象的枚举属性});console.log("设置name后的userInfo:", userInfo);console.log("设置name后的userInfo属性:", Object.keys(userInfo));

当enumerable设置为false的时候，咱们通过Object.keys枚举属性，并不能获取到name属性

应用Object.defineProperty批改和监听属性值的变动

let userInfo = {  age: "11",};let initAge = null;Object.defineProperty(userInfo, "age", {  enumerable: true,  configurable: true,  get: function () {    console.log("get属性办法,以后对象：", this);    return initAge;  },  set: function (newValue) {    console.log("set属性办法", newValue);    initAge = newValue;  },});userInfo.age = "30";console.log("最初userInfo", userInfo);

通过get和set操作对象属性相似于咱们在vue开发过程中的计算属性computed详解，通过get和set对以后对象进行设置属性值

Object.defineProperty小结

  • 由下面的的例子咱们能够晓得，当咱们应用Object.defineProperty操作对象的时候，都是间接通过对象属性进行操作，而不是对整个对象进行批改，删除和新增，查问属性
  • 在应用Object.defineProperty办法操作的时候，一些默认的属性选项，须要咱们留神

Object.defineProperty和vue2.x的分割

回到结尾提到的官网文档中形容的，响应式原理中，如下图

图片源自vue官网文档深刻响应式原理： https://cn.vuejs.org/v2/guide/reactivity.html

当组件渲染时，通过对象劫持，遍历data状态，那么须要思考的点是：

如果在组件运行时，咱们须要额定增加状态的时候，增加一个新的状态，或者在原有的状态下，增加一个新的属性会产生什么，这个新的状态并不在组件劫持的状态之内：

<p>  <span style="cursor: pointer; color: red" @click="handleUser"    >点击批改不在data状态下的值</span  ></p><p>用户信息: name {{ defaultUser.name }}, age: {{ defaultUser.age }}</p>data() {    return {      defaultUser: {        name: "张三",      },    };  },  methods: {    handleUser() {      this.defaultUser.age = "23";      console.log("数据曾经产生更改，然而视图没有产生更新", this.defaultUser);    },  },

当咱们点击按钮的时候，视图中的ui并没有产生更改，依据官网的文档，咱们能够应用 $set 针对新增的状态进行批改

<p>      <span style="cursor: pointer; color: red" @click="handleSet"        >点击$set批改属性值</span      >    </p><p>通过$set批改的值：{{ setData.name }}</p>data() {    return {      setData: {},    };  },methods: {    handleSet() {      this.$set(this.setData, "name", "张三");    },  },

除了后续新增的状态无奈进行批改之外，应用Object.defineProperty劫持的数据，对数组自身能够操作的到，然而会存在肯定的性能问题，具体不做具体解释，能够参考以下博文，感激该博主的博文，vue的框架的作者尤大也做了解释：

记一次思否问答的问题思考：Vue为什么不能检测数组变动 https://segmentfault.com/a/1190000015783546

结语

依据以上例子联合vue响应式原理，咱们能够晓得在vue2.x版本中Object.defineProperty存在以下问题：

1.监听数组变动下存在性能问题
2.Object.defineProperty只能劫持对象的属性，并且针对新增的data状态，无奈劫持到，只能通过vue的扩大办法$set进行解决

扩大vue3应用的proxy

阮一峰-ECMAScript 6 入门
查看最简略的例子和应用办法

下文截取自：阮一峰-ECMAScript 6 入门----> Proxy 能够了解成，在指标对象之前架设一层“拦挡”，外界对该对象的拜访，都必须先通过这层拦挡，因而提供了一种机制，能够对外界的拜访进行过滤和改写。Proxy 这个词的原意是代理，用在这里示意由它来“代理”某些操作，能够译为“代理器”

var obj = new Proxy({}, {  get: function (target, propKey, receiver) {    console.log(`getting ${propKey}!`);    return Reflect.get(target, propKey, receiver);  },  set: function (target, propKey, value, receiver) {    console.log(`setting ${propKey}!`);    return Reflect.set(target, propKey, value, receiver);  }});

Object.defineProperty比照Proxy集体了解

  • Proxy是针对整个对象的变动进行检测和拦挡，能够晓得对象的属性是新增，删除，还是批改等，都能够通过通过get和set进行监听失去
  • Object.defineProperty只针对对象得属性进行操作，联合vue2.x,组件渲染实现，后续新增得属性，没方法劫持到
  • Object.defineProperty针对属性，Proxy针对整个对象得操作

更多Object.defineProperty和Proxy的比照，以及vue3如果应用proxy实现对象的监听，感兴趣的同学能够去搜寻相干博文，后续有工夫再整顿。

源码地址

  • 码云 https://gitee.com/lewyon/vue-note
  • githup https://github.com/akari16/vue-note

文章集体博客地址：vue2.x版本中Object.defineProperty对象属性监听和关联

欢送关注公众号：程序猿布欧，不定期更新一些前端入门文章

创作不易，转载请注明出处和作者。