深入剖析 Vue.js 中 computed 计算属性和 watch 侦听器的区别

2024-02-09 08:34:23

揭开 Vue.js 中 computed 计算属性与 watch 侦听器的奥秘

作为一名经验丰富的 Vue.js 开发者，我经常遇到关于 computed 计算属性和 watch 侦听器的面试问题。虽然表面上这些概念看似简单，但深入探究后，你会发现它们隐藏着许多微妙之处。为了帮助你更透彻地理解它们，让我们踏上一次揭秘之旅。

computed 计算属性：数据绑定的利器

computed 计算属性是 Vue.js 中的强大工具，它允许你定义一个计算属性，其值是由其他属性动态计算而来的。这使得数据绑定变得轻而易举，并且在数据发生变化时，视图会自动更新。

代码示例：

Vue.component('my-component', {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
  template: `
    <div>
      <input v-model="firstName">
      <input v-model="lastName">
      <p>Full Name: {{ fullName }}</p>
    </div>
  `,
});

在上面的例子中，我们定义了一个 fullName 计算属性，它将 firstName 和 lastName 数据属性连接起来。每当 firstName 或 lastName 发生变化时，fullName 也会自动更新，从而在视图中显示完整的姓名。

watch 侦听器：数据变化的响应哨兵

watch 侦听器则扮演着数据的监视哨兵的角色，它允许你监视一个或多个属性的变化，并当这些属性发生变化时执行特定的回调函数。这使得你能够对数据变化做出反应，并执行相应的业务逻辑。

代码示例：

Vue.component('my-component', {
  data() {
    return {
      counter: 0,
    };
  },
  watch: {
    counter(newValue) {
      if (newValue > 5) {
        alert('Counter has exceeded 5!');
      }
    },
  },
  template: `
    <div>
      <button v-on:click="counter++">+</button>
      <p>Counter: {{ counter }}</p>
    </div>
  `,
});

在这个例子中，我们定义了一个 counter 侦听器，当 counter 数据属性的值超过 5 时，它会触发一个警报。这让你能够在数据达到某个阈值时做出响应。

computed 计算属性与 watch 侦听器：细微的差别

了解了 computed 计算属性和 watch 侦听器后，让我们揭示它们之间的细微差别：

计算方式： computed 计算属性的值是基于其他属性计算出来的，而 watch 侦听器则监视属性的变化并执行回调函数。
缓存与否： computed 计算属性的值是缓存的，只有在依赖的属性发生变化时才会重新计算。watch 侦听器则不是缓存的，每次依赖的属性发生变化都会触发回调函数。
时机： computed 计算属性的值在组件渲染时计算，而 watch 侦听器在属性变化后触发。