VueJS 임시 변수를 보는 옵저버를 중지하십시오.

Question

VueJS 및 Observer 객체에 문제가 있습니다. 내 개체의 일부를 임시 변수에 할당하여 나중에 사용할 수 있습니다. 그런 다음 내 개체의 원래 부분을 새 데이터로 다시 할당하고 8 초 후에 임시 변수에 저장된 원래 상태로 되돌립니다.

이 두 가지 상태를 다르게 렌더링하는 목록보기에이 객체를 연결했습니다.

관찰자가 내 임시 변수를 관찰하지 못하게하고 싶지만 어떻게 작동하는지 알 수 없습니다. 당신이 vuejs에서 반응성이 data(){} 개체를 원하지 않는 경우

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

, 당신이 '클론'의 정렬 JSON의 parse/stringify 방법을 사용하여 객체의 복사본을 만들 수 있습니다 아래

내가 현재 가지고있는 코드입니다. 예 :

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

이제 copy을 수정할 수 있으며 원본 데이터 속성이 업데이트되지 않습니다.

수정을 완료 한 후에도 this.original을 복사 객체의 값으로 할당하는 것처럼 쉽게 업데이트 할 수 있습니다.

jsfiddle - demo

Answer 2

사용 lodash.js 자바 스크립트 JSON.parse (JSON.stringify()가) 일부 큰 목록 또는 대량의 데이터에 대해 작동하지, 그 효과가 없기 때문에 라이브러리, cloneDeep 방법,

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

예

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

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