vue2的computed和watch

简单来说就是，computed适合用来操作单个属性，watch适合用来做开销比较大的操作例如异步操作/重新获取数据等

一、computed
computed是基于getter封装的函数方法，触发computed更新需要依赖的属性发生改变才会触发computed函数
计算属性使得 属性 更容易加上逻辑

<p>Reversed message: "{
   { reversedMessage }}"</p>

var vm = new Vue({
   
  el: '#example',
  data: {
   
    message: 'Hello'
  },
  computed: {
   
    // 计算属性的 getter<默认getter>
    reversedMessage: function () {
   
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('') // 
    }
  }
})

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：

console.log(vm.reversedMessage) // => ‘olleH’
vm.message = ‘Goodbye’
console.log(vm.reversedMessage) // => ‘eybdooG’

二、用方法代替computed
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

<p>Reversed message: "{
   { reversedMessage() }}"<