vue watch 计算属性

Question

在看VUE文档的时候，对上面的计算属性和watcher有一点点的疑惑，就是计算属性和观察者watcher，文档上面说后者更适合异步操作或者开销较大的操作。那么除了这一点，从功能上，这两者有什么区别了，换句话说，计算属性能做的事情watcher是不是都能做，反之亦然？

Answer 1

理论上来说，计算属性能做的事watcher也能做，反之亦然，因为从原理上来说都是利用getter/setter实现的观察者模式。

但是应该由计算属性完成的功能硬是要用watch完成的话，会不直观，会重复啰嗦。比如你要显示某个数组的最大值，用计算属性来做很直观简洁

computed : {
    maxValue() {
        return Math.max(...someArray)
    }
}

这个功能硬要用watcher实现，当然也行，data里面多一个属性maxValue

watch: {
    someArray(val) {
        this.maxValue = Math.max(val）
    }
}

但是显然计算属性更加直观简洁

应该使用watcher做的事，用计算属性来做当然也可以，比如异步网络请求：

watch: {
    someArray(val){
        Axios.get(url)
        ...
    }
}

强行用计算属性来做，首先你要在某个地方使用这个计算属性

computed: {
    someValue() {
        let a = this.someArray
        Axios.get(url)
        ...
    }
}

其次，这样使用，会在组件创建的时候就进行一次网络请求，你还需要处理这个条件，比起watcher来复杂很多，也很不直观，别人根本不知道你的本意是：如果someArray变化，进行网络请求，而watcher则简洁明了.

其实计算属性和watcher的区别主要在于适用场景的不同，这从他们的命名就很容易的看出来：
当你需要一个值，一个属性，它是变动的且逻辑比较复杂，写在模板里不直观，或者你需要多次使用这个值，就用计算属性；
当你需要监控某个变量，当其改变后进行某些操作，就用watch

一点拙见

Answer 2

这个问题以前有人问过。

computed properties are cached based on their dependencies

计算属性的最大特点是它的结果会被vue.js缓存处理，依赖项不变化的话，就直接使用上一次的计算结果。

Answer 3

每个计算属性都会注册一个watcher,这个watcher负责收集依赖Dep可以看下源码

Answer 4

从文档看computed是methods中某个方法的进化版。
如果methods中的某个方法，总是需要计算出结果显示在页面中，就应该把它放进computed里。
因为可以缓存，如果依赖项不发生变化，能直接取出来，不用重新计算。

watch里监听的是某个属性的变化。在组件中，比较常用于对传入的数据自身的处理。

Answer 5

我认为计算属性和观察者的作用可以互相实现，只不过使用哪个更加方便哪一个更合理。
如官网的例子：

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: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

此时计算属性就更加直观。

如果是想监听某个值变换引起，用watch也许更好