Deep watcher里面如何取得深层mutation的变量


#1
<template>
	<div id="app" ref="app">
		<button @click="foo.b = '3'">b to 3</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				foo: { 
                                        a: '1',
                                        b: '2'
                                }
			}
		},
		watch: {
			foo: {
				handler: function(to, from) {
					console.log(JSON.stringify(from));
					console.log(JSON.stringify(to));
				},
				deep: true
			}
		}
	}
</script>

在watcher里面,tofrom是一模一样的 我估计是因为foo的记忆体位置没有改变 所以即使b改变了
watcher的tofrom也是指向同一个变量(即是原本的foo)但是这样一来我就无法知道到底是a在改变还是b在改变

大神们如何处理这个情况?


#2

干嘛不直接用foo.a?


#3

我现在想改变foo.b, 然后从watcher里取得改变前跟改变后的foo.b


#4

watch:{
foo.b:function(newval,oldval){
…do sth
}
}


#5

谢谢 但我的问题是我想要知道foo底下所有的变量, 如果我有a, b, c, d, e, f, g, h, i, j这么多个变量… 这个方法就要为每一个变量生成一个watcher 有没有方法可以只生成一个watcher (类似deep参数) 但在watcher触发时我可以知道mutation的路径(例如watch会回传一个mutatedPath: 'foo.a’之类的)


#6

computed你值得拥有,说明白点,用
watch监听computed里面的func,func return this.foo


#7

即使我取得了computed里的foo 我也不知道是foo内哪个变量被改动啊…


#8

可以通过自定义函数实现


#9

即是原本vue沒提供對嗎?


#10

对于你说的既要知道改变的值并且还要知道是哪一个改变了,而且还是对象里的多个属性,我好像不知道如何能用vue原本的watch或者computed解决,如果你找到了解决方法也可以标记一下方便开发者们学习


#11

改变前拷贝一份 改变后拿到新值就可以比较了image


#12

这个不能用于深层的变量, 因为拷贝只能浅层拷贝 多于一层的话from跟to拿到的值会一样