๐Ÿ“• Language/Vue

[Age of Vue] Vue.js ์‹œ์ž‘ํ•˜๊ธฐ - 6. Reactivity ์ฝ”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌํ™” ํ•˜๊ธฐ

a n u e 2022. 4. 27. 22:42
<!--์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜-->
(function() {
     //JavaScript ์ฆ‰์‹œ ์‹คํ–‰ ํ•  ๋‚ด์šฉ ์ž…๋ ฅ     
})();
<!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 = {}; //๊ฐ์ฒด ์„ ์–ธ

		//์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ๋˜ ๋‹ค๋ฅธ ์Šค์ฝ”ํ”„์— ๋„ฃ์–ด์ค€๋‹ค.
        //๋Œ€๋ถ€๋ถ„์˜ ์˜คํ”ˆ ์†Œ์Šค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์ด ํ•ด๋‹น ํ˜•์‹์„ ๋„๊ณ  ์žˆ์Œ
        (function() {
            function init()
        {
            Object.defineProperty(viewModel, 'str', {
            //get: ์†์„ฑ์— ์ ‘๊ทผํ–ˆ์„ ๋•Œ์˜ ๋™์ž‘์„ ์ •์˜
            get: function() {
                console.log('์ ‘๊ทผ');
            },
            //set: ์†์„ฑ์— ๊ฐ’์„ ํ• ๋‹นํ–ˆ์„ ๋•Œ์˜ ๋™์ž‘์„ ์ •์˜
            set: function(newValue)
            {
                console.log('ํ• ๋‹น', newValue);
                rendoer(newValue);
            }
        });
        }

        function rendoer(value)
        {
            div.innerHTML = value;
        }

        init();
        })();
    </script>
</body>
</html>