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

Posted 2020-08-18

最近在开发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