vue2 计算属性和监听器

Vue2 中的计算属性和监听器都是用于响应式地更新视图的，但它们的使用场景略有不同。

计算属性是根据已有的数据计算而来，可以在模板中像普通属性一样使用，并且会缓存计算结果，只有在依赖的数据发生改变时才会重新计算。常见应用包括对数据进行过滤、格式化等操作。

示例代码：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

监听器则是监听指定数据的变化，当数据发生改变时执行相应的操作。常见应用包括异步操作、数据持久化等。

示例代码：

<template>
  <div>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`message changed from ${oldValue} to ${newValue}`)
    }
  }
}
</script>