Vue中Watch侦听器的简单用法
目录
之前做过关于数据不是定值，而是由其他数据计算而得来的页面。
以前学艺不精，只会一些Vue的简单用法，所以之前都是用的methods方法，在输入框上绑定input或者change事件，输入数据时，修改结果的效果，来达到数据动态由其他数据计算得来的。
后来随着Vue的使用越来越多，对Vue的其他知识点也开始逐渐多了解一点，这次做页面上的计算，用了Watch侦听器，这里简单记录一下自己在使用过程中遇到的问题和一些总结。
1.computed计算属性
说到Watch侦听器，就顺便记录一下computed计算属性。
1.1. computed的简单例子
之前就觉得computed计算属性和直接在methods定义方法很类似，用computed可以实现的功能，直接定义方法好像基本都可以实现。
就像下面的简单例子，做一个加法运算，computed计算属性和methods的方法都是一样的。
var vm = new Vue({
el: '#app',
data: {
a: 1,
b: 2
},
computed: {
returnAdd: function () {
return this.a + this.b;
}
},
methods: {
add: function () {
return this.a + this.b;
}
}
})如下图，两个运算都是没问题的。
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
Vue官方文档是这样解释的，计算属性依赖于缓存，只要你的值没有变，计算属性都会返回之前缓存中的结果，适用一些需要进行大量计算的方法，如果不需要缓存，还是methods方便些。
1.2.computed计算属性的setter
文档后面还讲到了计算属性可以提供一个setter，就像下面这样。
computed: {
returnAdd: {
// getter
get: function() {
this.sumAB_getter = this.a + this.b;
return this.a + this.b;
},
// setter
set: function(newVal) {
console.log('returnAdd-setter:' + newVal);
this.sumAB_setter = newVal;
}
}
},我试了一下，getter会在returnAdd的值手动修改的时候触发，但在计算后getter修改时不会触发，目前也没见别人用过，不是很清楚setter的用途。
2.Watch侦听器
侦听属性Watch，当你有一些数据需要随着其它数据变动而变动时，就可以使用Watch来监听他们之间的变化。
2.1.简单的watch侦听
这里以上面的加法为例，使用watch做加法计算：
watch: {
a: function(n, o){
this.sumAB_watch = n + this.b;
console.log('a-newValue:' + n, 'a-oldValue:' + o, 'sumAB_watch:' + this.sumAB_watch);
},
b: function(n, o){
this.sumAB_watch = this.a + n;
console.log('b-newValue:' + n, 'b-oldValue:' + o, 'sumAB_watch:' + this.sumAB_watch);
},
},监听a和b的值，第一个参数是修改后的值，第二个参数是修改前的值，这样就能监听数据变化来做计算了。
不过这里还有个问题，就是页面刚加载时，因为没有变化，所以不会执行。
这里就引申出了另外的知识：handler方法和immediate属性。
2.2.handler、immediate
其实之前写的watch方法默认就是handler，而当immediate属性为true时，就会先执行handler方法。
watch: {
a: {
handler(n, o){
this.sumAB_watch = n + this.b;
console.log('a-newValue:' + n, 'a-oldValue:' + o, 'sumAB_watch:' + this.sumAB_watch);
},immediate: true
},
b: {
handler(n, o){
this.sumAB_watch = this.a + n;
console.log('b-newValue:' + n, 'b-oldValue:' + o, 'sumAB_watch:' + this.sumAB_watch);
},immediate: true
}
},这样就会在页面加载时先执行一次，如下图。
2.3.监听对象、数组等（deep属性）
在监听对象时，会有一个问题，修改对象的值的时候，不会触发handler方法。
数组则可以触发，但是修改前的值和修改后的值是一样的，这里我暂时不清楚是什么问题。
var vm = new Vue({
el: '#app',
data: {
obj: {
x: 10,
y: 20
},
arr: [1, 2, 3, 4]
},
watch: {
obj: {
handler(n, o){
console.log('obj-newValue:' + n, 'obj-oldValue:' + o,);
}
},
arr: {
handler(n, o){
console.log('arr-newValue:' + n, 'arr-oldValue:' + o,);
}
}
}
})这里修改对象的值不会触发。
这时候就要用到deep属性，设置deep属性为true，监听器就会深入观察，向下遍历，性能开销可能会比较大。
obj: {
handler(n, o){
console.log('obj-newValue:' + JSON.stringify(n), 'obj-oldValue:' + JSON.stringify(o),);
},
deep: true
},这时候就能观察到对象内的数据变化了。
这里还有遇到一个小问题，如果监听器新增一个obj.z = obj.x + obj.y 的计算，这里监听了整个obj的变化，这样计算完成后，因为obj.z的变化，还会再执行一次，所以我觉得如果监听了整个对象的话，计算结果还是不要写到这个对象里面去，以免增加不必要的开销。
2.4.监听字符串形式
如果不想监听obj中其他值，只想监听obj.x的值的变化，可以写成字符串形式监听。
'obj.x': {
handler(n, o){
console.log('obj.x-newValue:' + JSON.stringify(n), 'obj.x-oldValue:' + JSON.stringify(o),);
}
},
2.5.监听多个对象
有时一个值可能是根据多个对象中的值，共同计算出来的，可以把这些改变的值放到一个对象中去，也可以直接监听多个对象。
watch: {
twoObj:{
handler: function(val) {
console.log('two change: ', val)
},
deep: true
}
},
computed: {
twoObj(){
const { obj, obj2 } = this;
return {
obj,
obj2
}
}
},这里是参考了 vue watch怎样同时监听两个值的变化并执行方法 这篇文章。
以上就是我在写关于监听器的经验和遇到问题，在这里简单做下记录，以后还可以多翻翻看，也希望对不懂的人有点小小的帮助。
