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时没法处理的数据