Vue2.0的计算属性computed和watch的区别及各自使用场景解读

Vue2.0中，Vue实例提供了两种方法：computed和watch来追踪和响应状态变化。

计算属性computed

定义：computed是一个计算属性，其返回值依赖于其他的状态数据。computed属性默认只有getter方法，因此不可以修改。

示例

<template>
  <div>
    <h2>计算属性computed示例</h2>
    <p>{{ message }}</p>
    <p>{{ reverseMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
    }
  },
  computed: {
    reverseMessage() {
      return this.message.split('').reverse().join('')
    },
  },
}
</script>

输出：

计算属性computed示例

Hello Vue!

!euV olleH

使用场景

1. 计算一个值，并且这个值需要依赖于状态数据。
2. 这个值需要在模板中多次使用。

监听watch

定义：watch是一个监听器，用来观察某个状态数据在发生变化时执行的特定逻辑。

示例

<template>
  <div>
    <h2>监听watch示例</h2>
    <p>{{ message }}</p>
    <input type="text" v-model="newMessage" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      newMessage: '',
    }
  },
  watch: {
    newMessage(newVal) {
      this.message = newVal
    },
  },
}
</script>

输入：

监听watch示例

Hello Vue!

当在输入框中输入World时，输出：

监听watch示例

Hello Vue!

World

使用场景

1. 监听某个所关心的状态数据的变化并且做一些特定的响应逻辑。
2. 表单元素的双向数据绑定。

computed和watch的区别

1. computed是计算属性，具有缓存功能，只有在计算的数据发生变化时才会重新求值；watch则是观察一个值的改变，每次值发生变化时都会执行回调。
2. computed适用于数据多次使用，watch适用于需要对数据进行特定的响应逻辑。
3. computed一般用于模板中的插值表达式和指令中的表达式，watch一般用于data数据变化时且需要执行异步或复杂操作时的情况。

综上，哪个更好还是需要根据业务场景来选择使用。

参考文献：
- Vue.js 官方文档computed
- Vue.js 官方文档watch