Vue.js에서 가치를 비반복적으로 만드는 방법은?

Vue.js에서 가치를 비반복적으로 만드는 방법은?

내 Vue.js 앱에는 사용자가 특정 "새로 고침" 작업을 완료할 때만 업데이트해야 하는 어레이 값이 있다.그러나, 내가 그 어레이 값에 새로운 값을 할당하는 즉시 어레이 값은 반응하게 되고 할당된 값의 데이터가 변경됨에 따라 즉시 변경된다.어레이 값은 비활성 상태로 유지되어야 한다.

예를 들어, 나한테 방법이 있어refresh()트리거된 경우 업데이트 의미displayedData, 반응하지 않아야 하는 ,currentData반응해야 하는 것. displayedData새로 고침이 호출될 때만 업데이트해야 함.

methods: {
    refresh: function() {
        this.displayedData = this.currentData;
    }
}

정적 값을 만들지 않고 반응하지 않는 값을 만들려면 JSON을 사용하여 값을 인코딩한 다음 디코딩하여 "복사본"을 만들 수 있다.

this.displayedData = JSON.parse(JSON.stringify(this.currentData));

이것은 한 값의 현재 상태를 다른 값에 할당하며, 첫 번째 값에 대한 변경은 이 코드가 다시 트리거될 때까지 두 번째 값을 변경하지 않는다.

currentData를 데이터() 메서드에 추가하지 않으면 반응하지 않는다.

export default {
    currentData: [],
    data() {
        return {

        }
    },
    methods: {
        refresh: function() {
            this.displayedData = this.currentData;
        }
    }
}

그런 다음 다음을 사용하여 섹션의 currentData를 계속 참조할 수 있다.{{ $options.currentData }}

접근 방식(반응도를 비활성화하지 않음)은 사용자가 새로 고침을 누를 때 임시 데이터에 다른 배열을 사용하고 좋은 배열에 자료를 옮기는 것이다.

첫 번째 배열의 값을 다음과 같이 임시 배열로 복사할 수 있다.this.temp = this.permanent.slice()에서created또는mounted수명 주기 함수

슬라이스는 배열의 얕은 사본을 만들 것이다.어레이의 항목도 복제해야 하는 경우 딥 카피 라이브러리 또는JSON.parse(JSON.stringify(...))방법

파괴 어세이션을 사용할 수 있다: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment?retiredLocale=it

this.displayedData = {...this.currentData}

당신은 첫번째의 "복사된" 데이터로 만들어진 새로운 물체를 갖게 될 것이다.

참조URL: https://stackoverflow.com/questions/53662412/how-can-i-make-a-value-in-vue-js-non-reactive