Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

下面是关于“Vue中computed(计算属性)和watch(监听属性)的用法及区别说明”的完整攻略。

1. computed(计算属性)

computed是一种在Vue中用于计算属性的方法，它一般用于需要进行复杂计算的场景。computed其实是一个类似于getter/setter的方法，当它所依赖的值发生改变时，它才会重新计算。

computed示例代码如下：

<template>
  <div>
    <p>商品单价：{{price}}</p>
    <p>商品数量：{{num}}</p>
    <p>总价：{{totalPrice}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 10,
      num: 5
    }
  },
  computed: {
    totalPrice() {
      return this.price * this.num;
    }
  }
}
</script>

上面的代码中，我们定义了一个计算属性totalPrice，它依赖于price和num这两个值。当price或num发生改变时，totalPrice会自动重新计算，并直接显示在页面上。

2. watch(监听属性)

watch则是一种用于监听属性变化的方法，当被监听的属性发生改变时，watch会执行相应的操作，比如发送网络请求、更新数据等。watch采用的是观察者模式，与computed不同的是，watch能够监听到任何数据的变化。

watch示例代码如下：

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  watch: {
    name(newName) {
      console.log(`您输入的内容是：${newName}`);
    }
  }
}
</script>

上面的代码中，我们监听了data中的name属性，当name发生改变时，watch会执行相应的操作并将新的值输出在控制台上。

3. 区别说明

计算属性和watch都是用于处理Vue数据的方法，它们的主要区别在于：

• 计算属性适合用于处理复杂的计算，当数据变化时会自动重算，且会缓存计算结果，提高计算效率。
• watch适合用于处理异步操作或需要在数据变化时执行一些操作的场景，可以监听任意数据，但需要手动去更新数据。

综上所述，我们可以根据业务需求选择合适的方法来处理Vue中的数据。