28. understanding reactivity with proxies

내용

이 강의에서는 Vue.js에서 데이터의 반응성(reactivity)이 어떻게 구현되는지에 대해 기본적인 이해를 제공합니다. 이 내용은 면접에서 Vue의 반응성에 대해 설명할 때 유용할 수 있습니다.

반응성의 개념: 프로그램이 데이터 변경에 반응하여 자동으로 업데이트하는 것을 의미합니다. 예를 들어, 엑셀은 실시간으로 계산 결과를 업데이트하는 반응성을 가지고 있습니다.
Proxy의 사용: Vue는 데이터의 반응성을 구현하기 위해 JavaScript의 Proxy 객체를 사용합니다. Proxy는 객체의 변경을 감지하고, 객체가 접근되거나 수정될 때 추가적인 작업을 수행할 수 있게 해줍니다.
Proxy 객체의 기능: Proxy 객체는 객체를 감시하고, 객체의 속성이 업데이트될 때 set 함수를 호출하여 변경 사항을 처리합니다. 이를 통해, 객체의 속성이 변경될 때마다 문서가 자동으로 업데이트됩니다.
Vue의 반응성 구현: Vue는 내부적으로 Proxy 객체를 사용하여 데이터의 변경을 감지하고, 이에 따라 DOM을 업데이트합니다. 이로 인해 개발자는 데이터를 업데이트하면 자동으로 화면이 갱신되는 반응성을 경험할 수 있습니다.
반응성 이해의 중요성: Vue의 반응성 메커니즘을 이해하는 것은 면접에서 눈에 띄는 지식을 제공하며, Vue를 사용하는데 있어서 중요한 부분입니다.

이 강의는 Vue의 데이터 반응성에 대한 기본적인 이해를 제공하며, 이를 통해 Vue가 어떻게 효율적으로 데이터 변경에 반응하여 DOM을 업데이트하는지 설명합니다.

Proxyopen in new window

index.html

<!DOCTYPE>
<html>

<head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="name"></div>

<script src="app.js"></script>
</body>

</html>

app.js

const data = {
    name: 'hyungju',
}

const observedData = new Proxy(data, {
    set(target, key, value) {
        document.querySelector('#name').innerText = value;
        target[key] = value;
    },
})

observedData.name = 'Lee-Hyung-Ju'

console.log(observedData.name) // Lee-Hyung-Ju

main.css

body{
    font-size: 20px;
    font-family: sans-serif;
}
.red{
    color: red;
}

# 28. understanding reactivity with proxies

# 내용

28. understanding reactivity with proxies

내용