vue.js之计算属性、methods和watch的区别

计算属性、methods和watch是vue.js的三个重要的属性。如果简单的使用计算属性和methods，很多人都认为做的事情都差不多。其实仔细琢磨，还是有很大的区别的。

计算属性VS methods：

计算属性和methods的用法如下

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



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

其实这两者的本质区别是：

computed是基于响应式依赖进行缓存的。何为响应式依赖呢？例如声明在data中的变量既有响应式的性质，用通俗一点的话讲就是，计算属性的触发条件是他的依赖变化了才会重新执行。例如上面的列子一样，只有data中定义的message发生变化了，计算属性才会执行，而且最终返回的事一个结果。而methods就像我们写的普通函数一样，需要我们主动去调用才会执行。而不是依赖数据的变换，并且也不需要返回一个结果，可以仅仅执行一个过程。当我们在获取一个数据时需要对一个大的数组进行大量循环才能获取时，那我们选择计算属性，基于依赖进行缓存那将会节省大量的性能消耗。而不是像methods一样每次调用都执行。

watch VS computed：

watch侦听器是vue提供的一个来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，选择watch会更合适。

// ...
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]
    }
  }
}

 通过这个例子我们可知，计算属性不仅仅是依赖的数据发生变化会触发改变该属性的值，我们也可以通过设置setter改变本身属性的值来改变他依赖得值。

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newValue, oldValue) {
      this.answer = 'Waiting for you to stop typing...'
    }
  },

 watch是侦听一个参数，当这个参数发生变化时影响其他数据的变化。并且可以获得该参数的新值和旧值进行相应的计算。通过以上叙述我们可以得知：

watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）
computed适合处理的场景是，获得一个值或者结果，该结果受其他的依赖的影响。（一个数据受多个数据影响），计算属性是基于响应式的依赖进行缓存，而只有定义在data中的参数才是响应式的，这个得特别注意

用图来阐述就是：

计算属性和watch还有一个好处就是：大大简化了我们去维护一个参数状态的复杂程度，试想如果没有这个东西的话，对于一个状态，我是不是得想到所有能影响到这个状态改变的因素以及地方，然后手动去维护，这样太复杂和不利于代码的可维护性和阅读性。 

methods用的是也是最多的，一般的事件绑定，普通函数，请求数据方法都是在methods中处理。然后vue的生命周期函数就是在相应的或者合适的时机调用这些定义好的函数。