Vue 中 computed 和 watch 有什么区别举例说明

在 Vue.js 中，computed 和 watch 都是用于响应式地处理数据变化的重要特性，但它们之间存在一些关键的差异。下面我将通过举例来说明它们的区别：

computed

computed 属性是基于它们的依赖关系进行缓存的。只有在相关依赖项发生改变时，它们才会重新计算。这使得 computed 属性非常适合用于处理复杂的逻辑，并且不需要频繁计算的情况。

示例

假设我们有一个 Vue 组件，它接受一个 firstName 和一个 lastName 作为 props，并想要计算一个完整的名字 fullName。

vue

<template>

  <div>

    <p>Full Name: {{ fullName }}</p>

  </div>

</template>

<script>

export default {

  props: ['firstName', 'lastName'],

  computed: {

    fullName() {

      return this.firstName + ' ' + this.lastName;

    }

  }

}

</script>

在这个例子中，fullName 是一个计算属性，它依赖于 firstName 和 lastName。只要这两个 props 中的任何一个发生变化，fullName 就会自动重新计算。但是，如果它们没有变化，fullName 就会从缓存中读取，而不会再次计算。

watch

watch 则用于观察和响应 Vue 实例上的数据变化。当需要在数据变化时执行异步操作或开销较大的操作时，watch 很有用。

示例

假设我们有一个 Vue 组件，它接受一个 searchQuery prop，并想要在每次搜索查询发生变化时执行一个搜索操作。

vue

<template>

  <div>

    <input v-model="searchQuery" placeholder="Search...">

  </div>

</template>

<script>

export default {

  props: ['searchQuery'],

  watch: {

    searchQuery(newVal, oldVal) {

      this.performSearch(newVal);

    }

  },

  methods: {

    performSearch(query) {

      // 执行搜索操作，可能是一个异步请求

      console.log('Searching for:', query);

    }

  }

}

</script>

在这个例子中，我们使用 watch 来观察 searchQuery 的变化。每当 searchQuery 发生变化时，performSearch 方法就会被调用，并传入新的搜索查询值。

区别总结

计算属性 (computed)：

基于它们的依赖项进行缓存。

适合处理复杂的逻辑，并且不需要频繁计算的情况。

返回的是一个值，可以直接在模板中使用。

侦听器 (watch)：

用于观察和响应数据变化。

适合执行异步操作或开销较大的操作。

可以在数据变化时执行函数或方法。

选择使用 computed 还是 watch 取决于你的具体需求和你想要如何处理数据变化。