공부/VUE.JS

2. Reactivity 구현과 코드 라이브러리화

ChoiDooSic 2021. 12. 9. 05:59

Reactivity 뷰의 핵심 기능!

# 데이터의 값이 바뀔때마다 계속 화면이 자동으로 그려지는것 뷰의 핵심인 Reactivity(반응성)이다.

#Object.defineProperty : 객체의 동작을 재정의하는 api

 

즉시 실행 함수(코드의 라이브러리화가 적용된 모습)

즉시실행 함수의 역할은 기본적으로 init과 render를
어떤 애플리케이션 로직에 노출되지않도록 또다른 유효범위(scope)에 넣어주어
관리해준다. (일반적으로 오픈 소스 라이브러리들은 이런 방식으로 관리된다)


즉시실행 함수 작성법 : (function(){})();

get: 속성에 접근했을 때의 동작을 정의

set: 속성에 값을 할당했을 때의 동작을 정의

 

위의 이미지에 Hello Vue는 처음에는 작성되어있지 않았으나

console창에서 viewModel.str = 'Hello Vue'; 를 입력하여 값을 변경해주었을때에

왼쪽 화면에 작성되었다.(Reactivity)

 

funtion render(value) : 값을 할당했을때에 set 펑션으로 전달하여

값이 전달된 즉시 화면에 변화가 일어나게한다

(div.innerHTML을 set 펑션안에 바로 넣고 사용하여도 상관없다)

 

 

'공부 > VUE.JS' 카테고리의 다른 글

6. 컴포넌트 통신 방식(props, 이벤트)  (0) 2021.12.13
5. 뷰 컴포넌트  (0) 2021.12.12
4. 뷰 인스턴스  (0) 2021.12.11
3. Vue.js 뷰의 개발자 도구  (0) 2021.12.10
1. VUE JS 시작 환경구성 + 참고 페이지 링크  (0) 2021.12.08