Vue中的computed，methods 和 watcher

Vue三大属性

• Methods:对象属性的函数，使用方法对发生在DOM中的事件做出反应或者从组件中的其他位置调用。方法也可以对公共功能进行分组，如处理表单提交，构建可重用的类似发出Ajax请求等；

• computed计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。它有以下几个特点：

  • 数据可以进行逻辑处理，减少模板中计算逻辑
  • 对计算属性中的数据进行监视
  • 依赖固定的数据类型（响应式数据）
    计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改计算属性，而是修改它的依赖。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      //this.fullName = newValue 这种写法会报错
      var names = newValue.split(' ')
      this.firstName = names[0]//对它的依赖进行赋值
      this.lastName = names[names.length - 1]
    }
  }
}

计算属性相比methods属性的优势：计算属性是基于它们的响应式依赖进行缓存的，即只要相应的响应式依赖发生改变时，才会重新求值，如果没有发生改变，计算属性会立即返回之前的计算结果，而不必再次执行函数。但是调用方法时，每当触发重新渲染时，不管响应式依赖有没有发生改变时，调用方法总会再次执行函数
计算属性的属性值必须是一个函数

• watch:Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性watch。watch中可以执行任何逻辑，如函数节流，Ajax异步获取数据，甚至操作 DOM（不建议）。对于希望响应已发生的更改（如属性或数据属性）执行操作的情况非常有用，或者想要执行异步或昂贵的操作以响应不断变化的数据时非常有用；

计算属性相比watchwe属性的优势**:watch方法是命令且重复的，而计算属性更简洁且高效

计算属性和监视属性的比较

从上面流程图中，我们可以看出它们之间的区别：

• watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。
• computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。
  除此之外，有点很重要的区别是：计算属性不能执行异步任务，计算属性必须同步执行。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch也可以检测computed属性。

总结

计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

• computed能做的，watch都能做，反之则不行
• 能用computed的尽量用computed