vue里的watch和computed

vue里的watch和computed

vue里的computed是什么？
首先我们明确computed的一个基本的定义
computed是用来监视自己定义的变量的
它不在在data里面声明(像普通变量一样)而是直接在computed里面进行定义

那么vue里的watch和computed都是以vue的依赖追踪机制为基础的
它们的任务：当某一个数据（我们设定的监控的依赖数据）发生改变的时候，所有依赖这个数据的数据都会相应产生改变，并且是自动变化，这就是watch和computed的任务，并且也是他们和methods的区别，因为methods是用来定义函数的，它是需要手动调用的

import Vue from 'vue'
new Vue({
  el: '#root',
  template: `
    <div>
      <p>Name: {{name}}</p>
      <p>Name: {{getName()}}</p>
      <p>Number: {{number}}</p>
      <p><input type="text" v-model="number"/></p>
      <p>FirsName: <input type="text" v-model="firstName"/></p>
      <p>LaseName: <input type="text" v-model="lastName"/></p>
    </div>
  `,
  data: {
    firstName: 'Jokcy',
    lastName: 'Lou',
    number: 0
  },
  computed: {
    name () {
      console.log('new name')
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    getName () {
      console.log('getName invoked')
      return `${this.firstName} ${this.lastName}`
    }
  }
})

当我们改变 number 时，整个应用会重新渲染，vue 会被数据重新渲染到 dom 中。这时，如果我们使用 getName 方法，随着渲染，方法也会被调用，而 computed 不会重新进行计算，从而性能开销比较小。当新的值需要大量计算才能得到，缓存的意义就非常大。
如果 computed 所依赖的数据发生改变时，计算属性才会重新计算，并进行缓存；当改变其他数据时，computed 属性 并不会重新计算，从而提升性能。
当我们拿到的值需要进行一定处理使用时，就可以使用 computed。

watch和computed的区别

watch是监听某个数据的变量，倾向于监听完它后调用哪个函数，一个数据影响多个其他函数的调用
而computed倾向于计算后返回一个数据
并且data中可以不声明你要computed的被监视值，但是必须声明你要watch的东西
而我们多数用computed来处理使用watch和methods时无法处理的数据