VUE之watch与computed

VUE之watch与computed

当时看文档的时候，文档把计算属性和观察者放在一篇讲，也看到其拿来对比。于是乎我就单纯的以为两者差不多，做项目的时候也大多用到的是计算属性，因为真的很便捷。但是最近遇到一些麻烦并回顾文档以后，发现不是我认为的那么简单。

我相信大多数网友百度到这儿的时候都用过并对computed属性略知一二了，这里解释一下大家可能没注意到的地方。

computed

data () {
    return {
      price: 12
    }
  },
  computed: {
    priceToStr () {
      return this.price + '￥'
    }
  }

例子很简单，我们只需要在模板处加入{{priceToStr }}即可显示带货币符号的价格字符串
而且，如果price发生变化，{{priceToStr }}也是跟着变化的。正如文档所说的：

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

这里，price就是priceToStr 的相关依赖。（不理解的同学可以直接认为是vue中定义的data下的变量）

当然，计算属性还有getter和setter之类的，项目中实在是没用到。

至此，我都用的computed很爽，直到我想监听我的路由变化情况并在路由变化时把当前路由保存到sessionStorage时，发现computed不可行。

于是我想到了好像有一个跟computed的差不多的属性，然后重新看了文档。很奇怪文档中为了警戒大家不要乱用watch，拿了一个例子告诉大家用watch很笨重。但其实只是那个例子更适合computed罢了。

watch

watch是真的能起到监听的效果，来看我实现的例子

watch: {
    // 监听路由变化 发生改变后 调用保存路由的方法
    '$route': 'changeStoreRoute'
  },

changeStoreRoute是method中的一个普通方法，在路由变化时果真调用。

监听器，看起来是键值形式，键可以是某个变量名，也可以是表达式（表达式需要加引号）；值可以是某个方法名，也可以是回调函数，甚至也可以是个对象。（对象的情况小的没试过，同学们可以尝试下）

但其实watch干我这个事有点屈才了，watch真正强在他可以在数据变化时做一些异步处理或者开销大的操作，这是computed所不能及的。