vue2.x版本中如何实现Object.defineProperty对象属性监听和关联？

前端

2023-11-08 12:49:53

Object.defineProperty对象属性监听和关联

在《深入响应式原理》一文中，官方明确指出，Object.defineProperty虽然用于监听对象的属性改变，但在实际使用中存在两个问题：

只会对对象的现有属性进行监听，如果之后添加新的属性，则无法监听，存在局限性。
在对嵌套对象的属性进行监听时，如果想对深度嵌套对象的属性进行监听，操作过程会很复杂。

针对这两个问题，vue2.x提供了更好的解决方案，通过Object.defineProperty结合递归的方式，可以实现对对象属性的深度监听。

Object.defineProperty对象属性监听

Object.defineProperty用于监听对象的属性，当属性发生改变时，会触发相应的回调函数。

以下是如何在vue2.x中使用Object.defineProperty监听对象属性：

// 创建一个对象
let obj = {
  name: 'John',
  age: 20
}

// 使用Object.defineProperty监听对象的属性
Object.defineProperty(obj, 'name', {
  get: function() {
    // 当读取属性时，触发此函数
    return this.name;
  },
  set: function(value) {
    // 当写入属性时，触发此函数
    this.name = value;
  }
});

// 监听属性的变化
obj.name = 'Mary';

// 当属性发生变化时，触发回调函数
console.log(obj.name); // 'Mary'

对象属性关联

为了解决只监听现有属性的问题，vue2.x提供了对象属性关联，通过这种方式可以对新增的属性进行监听。

以下是如何在vue2.x中实现对象属性关联：

// 创建一个对象
let obj = {
  name: 'John',
  age: 20
}

// 使用vue2.x的对象属性关联
Vue.util.defineReactive(obj, 'name');

// 监听属性的变化
obj.name = 'Mary';

// 当属性发生变化时，触发回调函数
console.log(obj.name); // 'Mary'

深度监听嵌套对象的属性

为了解决深度监听嵌套对象的属性的问题，vue2.x提供了深度监听功能。

以下是如何在vue2.x中实现深度监听嵌套对象的属性：

// 创建一个嵌套对象
let obj = {
  name: 'John',
  age: 20,
  address: {
    street: '123 Main Street',
    city: 'Anytown'
  }
}

// 使用vue2.x的深度监听功能
Vue.util.defineReactive(obj, 'address');

// 监听属性的变化
obj.address.street = '456 Elm Street';

// 当属性发生变化时，触发回调函数
console.log(obj.address.street); // '456 Elm Street'