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

一点拙见