vue深究第一弹:computed与watch的异同

最近在开发vue的过程中,不断用到了计算属性(computed)和观察者(watch),从逻辑上感觉它们很相似,但是尝试混用它们的时候,又出现了一些问题,那么它们到底有什么异同呢?

1. computed VS data
问计算属性与观察者异同这个问题之前,首先要明确为啥会有计算属性,即computed vs data。在vue中,数据有时有被处理一下再展示出来的需求,例如:


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello',
    name: 'tomczhang'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    },
    getWelcome: function () {
      return this.message   ' '   this.name
    }
  }
})

不管是reversedMessage还是getWelcome方法,单纯写在data中都显得很不优雅,所以,建立一个computed动态的去处理它们是很有必要的。

2. watch VS data
既然vue中数据和view是双向绑定的,那当用户输入文本的时候,vue就能监听到视图进行了变动,并将变动的数据传递给我们(具体的变动原理见此)。观察者就是系统监听到视图变动后调用的方法,参数分别是老的值和新的值。我们利用watch就可以改变data值。例如:


var vm = new Vue({
  el: '#demo',
  watch: {
    userInput: function (oldValue, newValue) {
      this.message = newValue;
    }
  }
})

当然我们针对例子1中的代码也可以用观察者来解决,这也是我写这篇文章的主因,像这样:


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello',
    name: 'tomczhang',
    welcome: ''
  },
  watch: {
    welcome: function () {
      this.welcome = this.message   ' '   this.name;
    }
  }
})

3. computed vs watch
BB了那么多,马上进入我们的正题。

相同: computed和watch都起到监听/依赖一个数据,并进行处理的作用
异同:它们其实都是vue对监听器的实现,只不过 computed主要用于对同步数据的简单处理,watch则主要用于数据输入时异步操作或者开销较大的情况。能用computed的时候优先用computed,避免了多个数据影响其中某个数据时多次调用watch的尴尬情况。对于视图层的改变则优先使用watch。

例如这样:


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

参考:
1)计算属性和观察者:https://cn.vuejs.org/v2/guide...

原文地址:https://segmentfault.com/a/1190000012656519


更多专业前端知识,请上 【猿2048】www.mk2048.com

你可能感兴趣的:(前端)