Vue中watch、computed和methods的区别

watch和computed的区别

watch和computed都是对数据的监听只有数据发生变化时才会触发，但是他们擅长的领域不一样
watch更擅长一对多：就是主要监听一个可以影响多个数据的数据
computed擅长多对一：主要监听多个数据影响一个数据的数据，一定要return
组合出的那个数据会自动定义不用在data中再次定义，
当然也可以使用watch来监听组成computed所监听数据的每一个数据，但是这样代码的重复率过高

### watch

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: '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
    }
  }
})

methods和watch、computed的区别

这个很直观，methods是通过事件驱动来执行函数的是被动的
watch、computed是当监听的数据发生变化时主动执行这个函数

methods和computed的区别

区别一个是主动与被动，另一个是methods的运算是没有缓存的，computed运算是有缓存的（只要运算所依赖的数据没有发生变化就会从缓存中取出结果）