Vue中computed 和 watch 的区别和运用的场景？

        computed：计算属性，依赖于其他属性，并且computed的值有缓存。只有它依赖的属性值（响应式依赖）发生变化，下一次获取computed的值时才会重新计算computed的值。

        watch：更多的是【观察】的作用，类似于某些数据的监听回调，每当监听的数据发生变化时，都会执行回调进行后续操作。

        运用场景：

• computed：当我们要进行数值计算，并且依赖于其他数据时，这时应该使用computed，因为利用computed的缓存特性，可以避免每次获取值时都重复计算。
• watch： 当我们在数据发生变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许我们执行一步操作（访问一个API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些是computed（计算属性）无法实现的

<div id="app">
  <p>message: "{{ message }}"</p>
  <p>message加上计算属性之后: "{{ reversedMessage }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message + '变化了'
    }
  }
})

// 输出结果
message：Hello
message加上计算属性之后: Hello变化了
</script>

计算属性中的缓存机制与methods中的方法

        我们可以通过在表达式中调用方法来达到同样的效果：

<div id="app">
  <p>message: "{{ message }}"</p>
  <p>message调用methods中的方法: "{{ reversedMessage() }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  methods:{
    reversedMessage: function () {
      return this.message + '变化了'
    }
  }

})
// 输出结果
message：Hello
message调用methods中的方法: Hello变化了
</script>

        我们可以将同一函数定义为一个methods中的方法而不是computed计算属性，两种方式得到的结果都是完全相同的。但不同的是计算属性是基于它们的响应式依赖进行缓存的。只有相关响应式依赖发生变化时才会重新求值。这就意味着只要data中的message没发生变化，多次访问reversedMessage计算属性就会立即返回之前的计算结果，而不会再次执行计算属性。相反，methods中方法没执行一次就会重新计算一次。

下面的计算属性将不在更新，因为其中没有响应式依赖。

computed：{
    totalNum(){
        return  1+1;
    }
}

// 返回的结果一直为2。