์์ HTML ๋ฌธ์ ์ ์ Vue ๊ธฐ๋ฅ์ธ Reactivity๋ฅผ ์ด์ฉํ์ฌ ๊ตฌํํด๋ณด์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var viewModel = {}; //๊ฐ์ฒด ์ ์ธ
// ๊ฐ์ฒด์ ๋์์ ์ฌ์ ์ํ๋ API
// Object.defineProperty(๋์ ๊ฐ์ฒด, ๊ฐ์ฒด์ ์์ฑ, {
// ์ ์ ํ ๋ด์ฉ
// });
Object.defineProperty(viewModel, 'str', {
//get: ์์ฑ์ ์ ๊ทผํ์ ๋์ ๋์์ ์ ์
get: function() {
console.log('์ ๊ทผ');
},
//set: ์์ฑ์ ๊ฐ์ ํ ๋นํ์ ๋์ ๋์์ ์ ์
set: function(newValue)
{
console.log('ํ ๋น', newValue);
}
});
</script>
</body>
</html>
์ด๋ฌํ ํน์ฑ์ Vue์ Reactivity ์ฆ, Vue์ ๋ฐ์์ฑ์ด๋ผ๊ณ ํ๋ค.
str์ด ๋ณํ์ ๋, ๊ณ์ํ์ฌ ๊ทธ ๋ณํ ๊ฐ์ ๋ง์ถ์ด ๋ฐ์ดํฐ๋ฅผ ๋ฟ๋ฆฌ๊ณ ์ถ์ผ๋ฉด
defineProperty API์ set์์ div์ newValue๋ฅผ innerHTML์ ์ด์ฉํ์ฌ ์ ํ ํด์ฃผ๋ฉด ๋๋ค.
set: function(newValue)
{
console.log('ํ ๋น', newValue);
div.innerHTML = newValue;
}
๊ทธ๋ผ newValue๊ฐ ๋ณํ ๋ ๋ง๋ค, ๊ฐ์ด ์๋์ผ๋ก ์ฌํ ๋น๋๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
