watch监听对象里面值的变化_Vue总结——computed和watch的用法和区别

computed——计算属性

写法一：

写法二：

computed默认有缓存

如果被依赖的属性没有发生变化，就不会重新计算。

什么是变化：

1. 点击n+1按钮，控制台打出 n变了
2. 点击obj.a=hi ，控制台打出 obj.a变了
3. 点击obj={a:'a'}，控制台打出obj变了

• obj原本是{ a : 'a' } ，现在obj = { a : ' a ' },这里的obj变了，因为地址变了
• 简单类型看值，复杂类型（对象）看地址
• 其实就是===的规则

watch——侦听器

用途：当数据变化的时候，执行一个函数

语法一：

watch: {
//o1:不能用箭头函数，箭头函数的this是全局对象
o2: function(value, oldValue){},
o3(){}，
o4: [f1, f2],
o5: 'methodName',
o6: {handler:fn, deep:true, immediate:true},'object.a': function(){}
}

语法二：

vm.$watch('xxx', fn, {deep: .., immediate: ..}

‘xxx'可以改为返回一个字符串的函数

选项：deep

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

选项：immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

当页面第一次渲染的时候，也会执行函数

面试考点：computed和watch的区别

computed：

1. 是用来计算出一个值，这个值我们调用的时候不需要用括号
2. 如果被依赖的属性没有发生变化，就不会重新计算（缓存）。

watch：

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

两个选项

• immediate：表示在第一次渲染的时候，是否调用函数
• deep：如果监听一个对象，是否要监听对象里面属性的变换