[Vue]method与计算属性computed、侦听器watch与计算属性computed的区别

一.方法method与计算属性computed的区别

方法method:每当触发重新渲染时,调用方法method将总会再次执行函数;

计算属性computed:计算属性computed是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值;

二.侦听器watch与计算属性computed的区别

1.watch监听的是一个变量(或者一个常量)的变化,这个变量可能是一个单一的变化也可能是一个数组。computed可以监听很多个变量,但是这个变量一定是vue实例里面的。

2.

计算属性computed:如果只是监听数据的变动更好的做法是使用计算属性而不是侦听器watch;

侦听器watch:当需要在数据变化时执行异步或开销较大的操作时,侦听器watch是最有用的(至于为什么此时不能用计算属性computed还没有查到依据,有小伙伴知道的可以回复一下~);

另外:计算属性computed的setter

计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

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

现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。

 

上一篇:spring 依赖注入的3种方式


下一篇:合理利用Java不可变对象,让你的代码更加优雅