6.2.3 监听对象-Vue.js从入门到精通(二)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(二)

### 6.2.3 监听对象

在Vue.js的开发过程中，数据的响应式系统是核心之一，它允许开发者以声明式的方式将数据渲染到DOM上，并在数据变化时自动更新视图。Vue通过`Object.defineProperty`（在Vue 3中，部分使用了Proxy以提供更全面的响应式能力）来劫持对象属性的getter和setter，从而实现对数据变化的监听。然而，当需要监听一个对象的属性变化时，尤其是对象内部深层次属性或动态添加的属性时，Vue提供了一些特殊的方法和技巧来实现这一需求。本章节将深入探讨如何在Vue.js中有效地监听对象，包括基本方法、深度监听、以及监听动态添加的属性。

#### 6.2.3.1 基本监听

在Vue的模板中，直接使用`v-model`或`{{ }}`插值表达式绑定对象的属性时，Vue会自动为该属性设置响应式监听。但是，在某些情况下，我们可能需要在组件的JavaScript部分（如methods、computed或watch属性中）对对象属性的变化做出响应。这时，可以利用Vue的`watch`选项。

```javascript
new Vue({
  el: '#app',
  data: {
    userInfo: {
      name: 'John Doe',
      age: 30
    }
  },
  watch: {
    'userInfo.name': function(newVal, oldVal) {
      console.log(`Name changed from ${oldVal} to ${newVal}`);
    }
  }
});
```

上述代码中，我们尝试监听`userInfo`对象的`name`属性。然而，这种写法在Vue 2.x中并不会直接工作，因为Vue的`watch`默认不深度监听对象内部属性的变化。为了监听对象的深层次属性，我们需要使用深度监听。

#### 6.2.3.2 深度监听

在Vue中，如果想要监听对象内部属性的变化（包括嵌套对象和数组的变化），需要在`watch`选项中使用`deep: true`。

```javascript
new Vue({
  el: '#app',
  data: {
    userInfo: {
      name: 'John Doe',
      age: 30,
      address: {
        city: 'New York'
      }
    }
  },
  watch: {
    userInfo: {
      handler(newVal, oldVal) {
        // 这里可以响应userInfo对象的任何变化，但不够精确
        console.log('userInfo changed');
      },
      deep: true // 开启深度监听
    },
    'userInfo.address.city': {
      handler(newVal, oldVal) {
        console.log(`City changed from ${oldVal} to ${newVal}`);
      },
      deep: true // 注意：对于嵌套属性，这里的deep: true 实际上是多余的，Vue会自动处理
    }
  }
});
```

在上面的例子中，虽然对`userInfo`对象的监听设置了`deep: true`，但通常不推荐这样做，因为它会触发非常频繁的回调，且难以定位到具体是哪个属性发生了变化。更推荐的做法是直接监听具体的属性或路径，如上例中对`userInfo.address.city`的监听。

#### 6.2.3.3 监听动态添加的属性

Vue的响应式系统默认只能对在实例初始化时就已经存在的属性进行监听。如果后来给对象动态添加了新的属性，并希望Vue能够监听这个新属性的变化，则需要使用`Vue.set`（在Vue 3中，是`this.$set`或`reactive`、`ref`结合`triggerRef`等方法）来确保新属性也是响应式的。

```javascript
new Vue({
  el: '#app',
  data: {
    userInfo: {
      name: 'John Doe',
      age: 30
    }
  },
  mounted() {
    // 动态添加email属性，并确保它是响应式的
    this.$set(this.userInfo, 'email', 'john.doe@example.com');

// 或者在Vue 3中，如果userInfo是通过reactive或ref创建的响应式对象
    // import { reactive, ref } from 'vue';
    // const userInfo = reactive({...});
    // userInfo.email = 'john.doe@example.com'; // Vue 3通常会自动处理新属性
    // 如果需要手动触发更新，可以考虑使用triggerRef（如果email是通过ref创建的）
  },
  watch: {
    'userInfo.email': function(newVal, oldVal) {
      console.log(`Email changed from ${oldVal} to ${newVal}`);
    }
  }
});
```

#### 6.2.3.4 使用计算属性和侦听器的高级技巧

虽然`watch`和`computed`是Vue中处理数据变化的两大法宝，但在监听对象时，它们各有优势。计算属性适用于需要根据依赖的响应式属性计算出新值的场景，且它们具有缓存功能，只有当依赖的属性变化时才会重新计算。而侦听器（watch）则更适用于执行异步操作或开销较大的操作，它在依赖的属性变化时立即执行回调。

- **结合使用**：在某些复杂场景中，可以结合使用计算属性和侦听器来优化性能或处理复杂逻辑。例如，可以使用计算属性来简化复杂的数据处理逻辑，然后在侦听器中根据计算属性的变化来执行异步操作。

- **监听复杂数据结构**：对于包含多个层级或动态属性的复杂数据结构，可以通过计算属性来简化监听逻辑，或者使用深度监听（注意性能影响）。

#### 6.2.3.5 性能考虑

在Vue中，深度监听虽然强大，但也可能导致性能问题，因为它会递归地遍历对象的所有属性。因此，在决定使用深度监听之前，应该仔细评估是否真的需要监听对象的所有变化，或者是否可以只监听特定的几个属性。

此外，对于大型应用，建议将应用拆分成多个小的、职责单一的组件，这样可以减少每个组件中需要监听的数据量，从而提高应用的性能和可维护性。

#### 结论

Vue.js提供了丰富的机制来监听对象的变化，包括基本的属性监听、深度监听、以及动态添加属性的监听。通过合理使用这些机制，我们可以构建出响应式强、性能优良的Vue应用。然而，也需要注意到这些机制可能带来的性能影响，并在实际应用中做出合理的权衡和选择。

该分类下的相关小册推荐：

Vue面试指南

Vue.js从入门到精通(四)

Vue.js从入门到精通(三)

TypeScript和Vue从入门到精通(五)

移动端开发指南

TypeScript和Vue从入门到精通(二)

Vue源码完全解析

Vue3技术解密

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(三)

Vue原理与源码解析

VUE组件基础与实战