Question

我有2个JS对象，每个对象在网页中呈现为Tree。

我的问题是当用户将更改应用于其他人时，如何强制对其中一个进行更改。

我的基本想法是在每个对象上“绑定onChange”显然注意不要生成无限循环。

在jQuery中看起来几乎很难，我读了一些关于“代理”的内容，但我不明白它是否可以帮助我解决这个问题。

我最后想到了vue.js.我读到vue.js非常有效syncing js and dom objects所以它们之间的变化几乎很容易，也许可以同步两个js对象？

更清楚，更多细节：

我有这样的事情：

let obj1={key1:1, key2:[1,2,3]}; // defines arbitrary data obj
let obj2={};
$.extend(obj2,obj1); // defines obj2 as clone of obj1

// do "something magic" here

我想得到以下内容：

obj1.key1=2; // => should automatically set  obj2.key1=2; under the hood
obj2.key2.push(4); // => should automatically set  obj1.key2=[1,2,3,4] under the hood

是否有任何技巧可以绑定两个（相同的，克隆的）数据对象，以便对其中一个进行的任何更改都会反映到另一个数据对象上，就好像所涉及的对象键“指向”相同的数据一样？由于在javascript中“通过引用”指定对象，如果我们定义第三个对象“obj_value”并将其作为值分配给上述对象，则可以执行此操作，如下所示：

obj1.key=obj_value; // both obj1.key and obj2.key point to the same object
obj2.key=obj_value;

但我想要更通用的东西，直接将一个obj键绑定到另一个，在伪代码中：

obj1.on('change',function(key,value)
{
  obj2.key=value;
})

Answer 1

watch: {
  objChangedByUser: function (value) {
    this.cloneOfobjChangedByUser = Object.assign({}, value);
  }
}

或者：

computed: {
  cloneOfObjChangedByUser: function () {
    return Object.assign({}, this.objChangedByUser);
  }
}

在Vue.js中“同步”两个JS对象

1 个答案: