VUE computed与watch的区别

computed是计算属性,它会根据你所依赖的数据动态显示新的计算结果,而且他的计算属性是基于它们的依赖进行缓存的,只有当相关依赖发生改变时才会重新求值,这也就意味当data中message的值未发生改变时,每次访问computedMessage(对message 进行加工的处理函数) 计算属性会立即返回之前的计算结果,而不必再次执行函数,支持缓存,不支持异步

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性如果依赖不变的话,它就会变成缓存,computed 的值就不会重新计算
所以,如果数据要通过复杂逻辑来得出结果,那么就推荐使用计算属性

watch是一个对象,键是data对应的数据,Vue 实例将会在实例化时调用$watch(),遍历 watch 对象的每一个属性,支持异步,不支持缓存

注意点:不应该使用箭头函数来定义 watch 函数,因为箭头函数没有 this,它的 this 会继承它的父级函数,但是它的父级函数是 window,导致箭头函数的 this 指向 window,而不是 Vue 实例
deep 控制是否要看这个对象里面的属性变化
immediate 控制是否在第一次渲染是执行这个函数

如果一个数据需要经过复杂计算就用 computed
如果一个数据需要被监听并且对数据做一些操作就用 watch

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×