ELI5: Vue 3의 반응성

반동. 유행하는 유행어입니다. 또한 프론트엔드 프레임워크의 가장 편리한 기능 중 하나입니다.

정확히 무엇이며 Vue 3에서 어떻게 작동합니까?

전제 조건

기본 JavaScript 및 JS 객체에 대한 실무 지식

기본 Vue.js 작업 지식

반응성이란 무엇입니까?

Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner.
Vue 3.x documentation

우리는 값이 의존하는 값의 변경에 응답하여 자체 업데이트할 수 있을 때 값이 반응적이라고 말합니다. 의존한다는 것은 무엇을 의미합니까?

예를 들어 보겠습니다.

let val1 = 2
let val2 = 3
let sum = val1 + val2

sum의 값은 항상 val1과 val2의 값에 의해 결정되므로 sum이 val1과 val2에 의존한다고 말합니다.

값 중 하나가 변경에 따라 달라지면 합계는 어떻게 됩니까? 일반 JavaScript에서는 동일하게 유지됩니다.

console.log(sum) // 5

val1 = 3

console.log(sum) // Still 5

그러나 합계가 반응적이라면:

console.log(sum) // 5

val1 = 3

console.log(sum) // Sum is 6!

sum 값은 종속된 값의 변경에 따라 변경됩니다.

Vue는 값을 반응형으로 만들기 위해 무엇이 필요합니까?

Vue는 다음을 알아야 합니다.

해당 값에 어떤 종속성이 있는지 확인합니다.

해당 종속성이 변경될 때.

Vue는 또한 종속성이 변경될 때 값을 다시 계산할 수 있어야 합니다.

Vue가 종속성이 변경될 때를 아는 방법

Vue는 모든 구성 요소의 데이터 개체를 ES6 Proxy 으로 래핑합니다.
프록시는 대상 개체를 래핑하는 개체입니다.

이것은 모든 반응 값이 구성 요소의 데이터 개체에 있는 속성에 직접적으로 의존하거나 의존하지 않기 때문에 중요합니다.

프록시를 사용하면 대상의 속성을 가져오거나 설정하기 위한 모든 요청을 가로챌 수 있습니다. 또한 이러한 요청에 대한 응답으로 모든 코드를 실행할 수 있습니다.

덕분에 코드가 데이터 개체의 속성 중 하나를 변경하려고 시도하면 Vue가 이를 가로채 인식합니다.

그러면 Vue는 해당 값에 의존하는 모든 함수를 다시 계산할 수 있습니다. 그러나 Vue는 어떤 기능이 어떤 값에 의존하는지 어떻게 알 수 있습니까?

Vue가 값에 속하는 종속성을 아는 방법

값을 반응형으로 만들려면 함수로 래핑해야 합니다. 다시 설명하기 위해 sum 사용:

// we need to go from

let val1 = 2
let val2 = 3
let sum = val1 + val2

// to

const updateSum = () => {
 sum = val1 + val2
}

그런 다음 Vue는 이러한 모든 기능을 효과로 래핑합니다. 효과는 다른 함수를 인수로 취하는 함수입니다. 그런 다음 Vue는 해당 함수 대신 효과를 호출합니다.

Vue가 효과를 호출할 때 효과는 다음과 같습니다.

실행 중임을 기록합니다.

인수로 받은 함수를 호출합니다.

함수가 종료된 후 실행 중인 효과 목록에서 자신을 제거합니다.

모든 소스 값이 프록시(데이터 구성 요소)에서 가져온다는 것을 기억하십니까? 래핑하는 함수를 실행하는 동안 효과는 데이터 개체의 속성이 필요하고 이를 읽으려고 시도합니다.

프록시는 해당 읽기 요청을 가로챕니다. Vue는 현재 실행 중인 효과를 확인합니다. 그런 다음 효과가 읽으려는 속성에 따라 다르다는 것을 기록합니다. 이것이 Vue가 어떤 값이 어떤 속성에 의존하는지 아는 방법입니다.

그렇다면 Vue는 종속 값을 반환하는 함수를 언제 다시 실행해야 하는지 어떻게 알 수 있을까요?

대답은 다시 한 번 Proxy의 마법입니다. 프록시는 속성 값 설정 요청도 가로챌 수 있습니다.

이제 효과와 효과가 의존하는 값에 대한 기록이 있음을 기억하십시오. 데이터의 속성 값이 변경되면 Vue는 한 가지 작업을 수행해야 합니다. 해당 레코드를 확인하고 소스 값을 업데이트하는 것입니다.

Vue는 Vue에 의존하는 모든 효과를 다시 실행하여 값을 업데이트할 수 있습니다.

결론

이 기사는 Vue 3에서 반응성이 어떻게 작동하는지에 대한 간략한 개요입니다. 주제에 대해 더 읽고 싶다면 다음 리소스를 참조하세요.

Understanding the New Reactivity System in Vue 3

Reactivity in Depth