Vue에서 중첩된 변경 사항을 확인하는 방법

Vue는 반응형 언어입니다. 즉, 데이터가 변경되면 자동으로 HTML에 표시되도록 할 수 있습니다. 이를 돕기 위해 watchers in vue을 사용하여 데이터의 변경 사항을 감시한 다음 HTML에 작업을 수행하거나 이에 대한 메시지를 사용자에게 보낼 수 있습니다.

이것은 간단한 데이터 세트에 대해서는 잘 작동하지만 한 수준보다 더 깊은 데이터를 가지기 시작하면 변경 사항을 제대로 관찰하기가 더 어려워집니다.

Vue에서 중첩된 데이터 변경 사항 확인

이 문제에 대해 조금 이해하려면 감시자가 Vue에서 작동하는 방식을 이해해야 합니다. Vue는 얕은 변경 사항만 감시합니다. 예를 들어 아래에서 count 및 console.log 해당 변경 사항을 감시합니다.

<script>
export default {
    data() {
        return {
            count: 1
        }
    },
    watch: {
        count(data) {
            console.log(data);
        }
    }
}
</script>

<template>
    <h1>{{ count }}</h1>
    <button @click="++this.count">
        Click Me
    </button>
</template>

사용자가 버튼을 클릭할 때마다 우리++this.count와 감시자는 count의 변경 사항을 감시합니다. 그런 다음console 데이터를 기록하므로 새 카운트 값을 볼 수 있습니다. 즉, 버튼을 클릭할 때마다 count 값이 콘솔 로그에 표시됩니다.

그러나 얕은 변경 사항은 Vue가 해당 속성 값의 변경 사항만 확인함을 의미합니다. 한 수준 이상의 데이터가 있는 경우 Vue는 업데이트를 확인하지 않습니다. 예를 들어, 아래의 count.number 업데이트는 count에 대한 감시자를 트리거하지 않습니다. Vue는 단순히 count보다 더 깊은 변경 사항을 확인하지 않기 때문입니다.

data() {
    return {
        count: {
            number: 1,
            type: 'number'
        }
    },
    watch: {
        // This doesn't get triggered when count.number!
        count(data) {
            console.log(data);
        }
    }
}

대신 어떤 요소가 변경되고 있는지 구체적으로 언급해야 합니다. 감시자를 count.number를 감시하도록 변경하여 위의 count.number의 변경 사항을 계속 감시할 수 있습니다.

data() {
    return {
        count: {
            number: 1,
            type: 'number'
        }
    },
    watch: {
        // This gets triggered when count.number changes!
        "count.number" : function(data) {
            console.log(data);
        }
    }
}

위의 방법을 사용하면 속성 내 속성의 변경 사항을 쉽게 확인할 수 있으므로 적절한 감시자를 실행할 수 있지만 지저분해질 수 있습니다. 단순히 count 변경 사항을 확인하려면 deep 속성을 사용해야 합니다.

깊은 속성 사용

deep 속성은 모든 감시자에 추가할 수 있으며 Vue가 특정 데이터 속성 내의 모든 변경 사항을 감시하도록 강제합니다. 이는 watcher를 약간 다르게 작성해야 함을 의미합니다.

data() {
    return {
        count: {
            number: 1,
            type: 'number'
        }
    },
    watch: {
        count: {
            handler(data) {
                console.log(data);
            },
            deep: true
        }
    }
}

이제 count 내의 속성이 변경될 때마다 count 감시자가 실행됩니다. 이번에는 console.log(data) 전체 count 개체가 콘솔 로그에 기록됩니다. 즉 { number: 1, type: 'number' } 입니다.

이것은 속성 내에서 특정 속성을 대상으로 지정하는 것보다 훨씬 쉽지만 비용이 많이 듭니다. Vue는 매번 각 속성을 거쳐야 하므로 매우 큰 개체에 심각한 성능 문제가 발생할 수 있습니다. 따라서 알려진 작은 크기의 개체가 있는 경우에만 사용하십시오. 다른 상황에서는 count.number 와 같은 특정 속성을 대상으로 지정하십시오.