reactivity

인프런 강의 중 '캡틴판교'님의 강의를 수강하며 개인 공부를 위해 정리한 글입니다.

Reactivity 란?

vue의 가장 큰 특성인 데이터 바인딩, 또는 실시간 적용이라는 의미를 내포한다.
데이터 또는 소스 코드가 변경되면 바로 웹에서 적용이 되어 보여진다.

예시 소스코드

<div id="app"></div>
    <script>
        var div = document.querySelector('#app');
        div.innerHTML = 'hello world';
        var viewModel = {}
        // Object.defineProperty(대상 객체, 객체의 속성, {
        //     //정의할 내용
        // })

        //함수 즉시 실행
        (function() {
            function init() {
                Object.defineProperty(viewModel, 'str', {
                    // 속성에 접근 했을 때의 동작을 정의
                    get: function () {
                        console.log('접근');
                    },
                    // 속성에 값을 할당 했을때의 동작을 의미
                    set: function (newValue) {ß
                        console.log('할당', newValue);
                        render(newValue);
                    }
                });
            }

            function render(value) {
                div.innerHTML = value;
            }
            init();
        })();  
    </script>

render 라는 함수에 파라미터 값을 전달 하면 init 이라는 함수가 실행이 된다.
그러면서 화면에는 파라미터 전달 값이 뿌려지고, console 로그에는 할당 된 데이터 값이 log로 찍힌다.

출력 예시 화면