Vue的watch和computed方法的使用及区别介绍

Vue中的watch和computed都是用来监听数据变化的方法，但在使用时有些差别。下面将对Vue的watch和computed进行详细讲解，并给出两个示例。

Watch

Watch的用法

watch可以监听数据的变化，并进行相应的操作。它可以监听一个或多个数据的变化，当数据发生变化时，会执行相应的回调函数。

watch: {
  username(newVal, oldVal) {
    console.log('新值：' + newVal + '，旧值：' + oldVal)
  }
}

上面的示例中，我们使用watch监听了username这个数据。当username的值发生变化时，回调函数会被调用，并且会接收到两个参数：新值和旧值。

Watch的应用场景

• 异步操作：watch可以监听 Ajax 请求、用户输入、消息订阅等异步事件，进行操作之后更新数据，从而解决异步数据更新的问题。
• 复杂计算：当一个数据的改变会影响到多个其它数据的变化的时候，就需要使用watch来监听数据的变化。

Computed

Computed的用法

computed用来声明计算属性，计算属性的值是根据其他属性计算得到的。它会缓存计算结果，在多次读取计算属性时，不会重复计算。

computed: {
  fullName() {
    return this.firstName + " " + this.lastName;
  }
}

上面的示例中，我们声明了一个fullName的计算属性，该计算属性的值是根据firstName和lastName来计算得到的。

Computed的应用场景

• 计算昂贵的操作：如果一个操作比较昂贵，使用computed可以避免在每次读取值时重新计算，只有在依赖数据发生变化时才重新开始计算。
• 综合用途：computed可以在模板中使用，而watch不行。computed还可以和v-model结合使用，实现双向绑定。

区别介绍

• Computed是计算属性，Watch是侦听属性。
• Computed根据它的依赖缓存计算值，只有当依赖项发生改变时才会重新计算；Watch可以监听到值的变化，在回调函数中实现自定义逻辑。
• Computed适合用于多个属性相互依赖的情况，当依赖的属性变化时，计算属性会自动更新；Watch更加灵活，可以执行任何逻辑，并且可以监听到一个数组的变化。
• Computed会有缓存，只要相关属性没有发生改变，多次访问计算属性不会重复计算；watch没有缓存，会在每次数据变化时执行。

示例一

下面是一个使用computed计算属性的例子。在表单的计算属性中使用了一个函数，计算了表单中输入的值的总和。

<template>
  <div>
    <input type="text" v-model="value1">
    <input type="text" v-model="value2">
    <input type="text" v-model="value3">
    <p>总和：{{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: 0,
      value2: 0,
      value3: 0
    };
  },
  computed: {
    total() {
      return parseInt(this.value1) + parseInt(this.value2) + parseInt(this.value3);
    }
  }
};
</script>

示例二

下面是一个使用watch侦听属性的例子。监测两个字段的变化，当两个值都有变化时输出一个信息。

<template>
  <div>
    <input type="text" v-model="value1">
    <input type="text" v-model="value2">
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value2: ""
    };
  },
  watch: {
    value1(newValue, oldValue) {
      if (this.value2) {
        console.log(`value1的新值:${newValue}，旧值：${oldValue}，value2的值：${this.value2}`);
      }
    },
    value2(newValue, oldValue) {
      if (this.value1) {
        console.log(`value2的新值:${newValue}，旧值：${oldValue}，value1的值：${this.value1}`);
      }
    }
  }
};
</script>

以上就是Vue的watch和computed方法的使用及区别介绍的攻略。希望对你有所帮助。