4. 计算属性和侦听器

计算属性

1. 模板内的表达式——用于简单运算的，不推荐放入太多逻辑

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

2. 对于任何复杂逻辑，都应当使用计算属性

基础例子

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  <p>Computed reversed message: "{{ reversedMessageFunc() }}"</p>
</div>

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

• vm.reversedMessage 的值始终取决于 vm.message 的值
• 计算属性的 getter 函数是没有副作用 (side effect) 的

计算属性缓存 vs 方法

相同

在表达式中调用methods中的方法，可实现同样的效果

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

不同

computed

• 计算属性是基于它们的响应式依赖进行缓存的

• 只在相关响应式依赖发生改变时它们才会重新求值

• 不改变响应式依赖，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数

methods

• 每当触发重新渲染时，调用方法将总会再次执行函数

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性 watch

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

侦听属性 watch

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'
    // 计算属性fullName不需要在data定义
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

计算属性的 getter 和 setter

// ...
computed:{
    fullName: {
        // getter 读
        get: function() {
            return this.firstName + '' + this.lastName
        },
        // setter 写
        set:function(newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}
// ...

侦听器

当需要在数据变化时执行异步或开销较大的操作时，推荐使用侦听属性watch