javascript - "Sync"Vue.js中的两个JS对象

Question

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

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

我的基本想法是在每个对象上“绑定(bind)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

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

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

但我想要更通用的东西，直接将一个 obj 键绑定(bind)到另一个，用伪代码:

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);
  }
}