Vue官网文档学习

计算属性

• 模板中不要放太多的逻辑，逻辑移到计算属性中
• 计算属性其实是同名属性的getter函数
• 计算属性和方法的区别：
  计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值；
  每当触发重新渲染时，方法总会执行。

computed: {
  now: function () {
    return Date.now()
  }
}
//上面的计算属性不是响应式依赖来缓存的，所以不会实时更新

• 计算属性默认只有 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 回调
• 需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
• watch :{
  watchName(newValue, oldValue)
  }
• 计算属性和侦听属性的区别：
  计算属性会return一个值
  侦听属性定义了操作