Question

我遇到了VueJS和Observer对象的问题。我将我的对象的一部分分配给临时变量以供稍后使用。然后用新数据重新分配我的对象的原始部分，并在8秒后将其恢复到我存储在临时变量中的原始状态。

我将此Object链接到列表视图，该列表视图以不同的方式呈现这两种不同的状态。

我想阻止观察者观察我的临时变量，但我无法弄清楚如何。

以下是我目前的代码：

var temporary = core_data.map_data[data.selected]; //This is the variable I dont want to be observed.

core_data.map_data[data.selected].colour = data.colour;
core_data.map_data[data.selected].message = data.message;
core_data.map_data[data.selected].type = "ping";
setTimeout(
    function () {
        core_data.map_data[data.selected] =temporary;

        // console.log(core_data.map_data);
    }, 8000);

Answer 1

如果你不想在vuejs data(){}对象中反应，你就可以克隆＆＃39;克隆＆＃39;并使用JSON的parse/stringify方法制作对象的副本。例如：

 var copy = JSON.parse( JSON.stringify( this.original ) );

您现在可以修改copy，但它不会更新原始数据属性。

完成修改后，您仍然可以更新this.original，就像为其指定复制对象的值一样简单。

jsfiddle - demo

Answer 2

使用lodash.js javascript库，cloneDeep方法，因为JSON.parse（JSON.stringify（））不适用于某些大型列表或大型数据，而且效果不佳

https://lodash.com/docs/#cloneDeep

实施例

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

VueJS停止观察者观察临时变量

2 个答案: