【Vue.js】Vue官方文档学习-computed属性和watcher

一、computed属性

对于所有复杂逻辑，你都应该使用 computed 属性。

为什么呢？

在模板中放入太多的逻辑，会使模板过度膨胀和难以维护。
当你想要在模板中多次引用时，就会更加难以处理。

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

<div id="example">
  <p>初始 message 是："{{ message }}"</p>
  <p>计算后的翻转 message 是："{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 一个 computed 属性的 getter 函数
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

这里声明了一个 computed 属性 reversedMessage。
为 vm.reversedMessage 属性提供一个函数，作为它的 getter 函数。
vm.reversedMessage 的值总是依赖于 vm.message 的值。
像绑定普通属性一样将 computed 属性的数据绑定到模板中的表达式上。
Vue 能够意识到 vm.reversedMessage 依赖于 vm.message，也会在 vm.message 修改后，更新所有依赖于 vm.reversedMessage 的数据绑定。
声明式来创建这种依赖关系：computed 属性的 getter 函数并无副作用。

二、computed缓存 vs method方法

在表达式中通过调用 method 方法的方式，也能够实现与 computed 属性相同的结果：

<p>翻转 message 是："{{ reverseMessage() }}"</p>

----------

// 在组件中
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

区别在哪呢？

computed 属性会基于它所依赖的数据进行缓存，只有在它所依赖的数据发生变化时，才会重新取值。

只要 message 没有发生变化，多次访问 computed 属性 reversedMessage，将会立刻返回之前计算过的结果，而不必每次都重新执行函数。

同样意味着，如下的 computed 属性永远不会更新，因为 Date.now() 不是一个响应式的依赖数据：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每当触发重新渲染时，method 调用方式将总是再次执行函数。

三、computed属性和watch属性

watch属性：观察和响应 Vue 实例上的数据变化，用于命令式的watch回调函数。

<div id="demo">{{ fullName }}</div>

----------

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

以上代码时命令式和重复的，对比computed属性实现的版本：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

四、watcher

当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，自定义 watcher 的方式就会很有帮助。