vue中计算属性与监听

在Vue中，计算属性和监听器都是用来监听数据变化并执行相应操作的。

计算属性是基于它们的依赖进行缓存的。只有当它们的依赖发生改变时，才会重新计算。计算属性适用于需要进行复杂计算的场景，比如对数据进行过滤、排序等操作。

监听器则是监听指定的数据变化，并在数据变化时执行相应的操作。监听器适用于需要执行一些异步或开销较大的操作的场景。

下面是一个计算属性和监听器的示例：

<template>
  <div>
    <p>原始价格：{{ price }}</p>
    <p>打折后价格：{{ discountPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.8
    }
  },
  computed: {
    discountPrice() {
      return this.price * this.discount
    }
  },
  watch: {
    price(newVal, oldVal) {
      console.log(`价格从${oldVal}变为${newVal}`)
    }
  }
}
</script>

在上面的示例中，我们定义了一个计算属性`discountPrice`，它依赖于`price`和`discount`两个数据。当`price`或`discount`发生变化时，`discountPrice`会重新计算。

同时，我们还定义了一个监听器`watch`，它监听了`price`数据的变化，并在数据变化时打印出变化前后的价格。