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

Question

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

我将这个对象链接到一个列表视图，它以不同的方式呈现这两种不同的状态。

我想阻止观察者观察我的临时变量，但我不知道如何做。

下面是我目前的代码：

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(){} 对象中进行反应，您可以对 'clone' 进行排序并使用 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 停止观察者观察一个临时变量

VueJS Stop observer watching a temporary variable

javascript

observers

vue.js

vuejs2