Vue观察两个变量在变化时相互联系，导致无限循环

Question

我有一个类似的vue应用程序

var VueAppExport = new Vue({
el: '#nav_section_downloads',
delimiters: ['[[', ']]'], //to avoid conflict with django template
data: {
xport: {width: 1000, height: 1000, lock: true}
},
watch: {
'xport.width' : {
handler: function(newValue, oldValue) {
if (this.xport.lock){
this.xport.height = parseInt(this.xport.height) + parseInt(newValue) - parseInt(oldValue);
}
},
},
'xport.height' : {
handler: function(newValue, oldValue) {
if (this.xport.lock){
this.xport.width = parseInt(this.xport.width) + parseInt(newValue) - parseInt(oldValue);
}
},
},        
},
})

我想要这样的场景，如果宽度或高度值发生变化，那么当锁定为真时，高度/宽度值相应地发生变化。

我的代码的问题是无限循环。观察宽度的变化和在变化的情况下改变高度，同时观察高度，然后改变宽度是无限的相互滋养。

我试图通过计算方法设置值，但在计算设置器中旧值不可用。

有办法完成这项任务吗。

Answer 1

你有没有试着观察整个对象xport，比如：

watch: {
xport: {
handler(val, oldVal){
// do stuff
},
deep: true
}
}