Vue：构造选项之 computed 和 watch

computed – 计算属性

被计算出来的属性就是计算属性

例1

用户名展示

例2

实现下面功能

思路一

点击后改users

思路二

使用computed

缓存

如果依赖的属性没有变化，computed就不会重新计算

注意：getter / setter默认不会做缓存，Vue进行了特殊处理

watch – 侦听

用途

当数据变化时，执行一个函数

例1-实现撤销

例2-模拟computed

什么是变化

示例

上面示例中，如果是n+1，console.log为n变了；如果是obj.a + 'hi'，console.log为obj.a变了；如果是obj=新对象，console.log为obj变了。

这是===的规则，简单类型看值，复杂类型（对象）看地址。（内存中的stack）

语法

语法1

watch: {
  o1: function(value,oldvalue){},
  o2(){},
  o3: [f1,f2],
  o4: 'methodName',
  o5: {handler:fn, deep: true, immediate: true},
  'object.a': function(){}
}
复制代码

注意不要使用箭头函数

因为箭头函数绑定了父级作用域的上下文，而如果在watch里使用箭头函数，比如：

new Vue({
  data: ...,
  watch: {
    o6: () => {
      this.xxx
    },
  }
})
复制代码

这里的o6的外层没有函数，父级作用域是全局作用域，this.xxx将是undefined

语法2

vm.$watch('xxx',fn,{deep:..,immediate:..})
// 'xxx' 可以改为一个返回字符串的函数
复制代码

用语法2，改写上面示例，改写1，改写2

选项deep

为了发现对象内部值的变化，可以在选项参数中指定deep:true。注意监听数组的变更不需要这么做。

比如上面的示例，添加deep:true可以通过deep:true来做到改变obj.a时，监控到obj变了

computed 和 watch 的区别

computed是计算属性，watch是侦听。

被计算出来的属性就是计算属性，不需要加括号，可以当属性一样用；根据依赖可以自动缓存，如果依赖属性不变，就不会重新计算。

watch如果数据变化，执行一个函数。有immediate选项，表示是否在第一次渲染时使用，还有deep选项，表示是否监听对象值内部的变化。