1. Vue 인스턴스
· 애플리케이션 인스턴스
- Vue.createApp()으로 만든 객체
- 전체 컴포넌트 트리는 애플리케이션 인스턴스를 마운트 할 때 렌더링 됨
<!-- 루트 컴포넌트 인스턴스 -->
let vm = Vue.createApp({
name: "App",
data() {
return {name: ""};
},
}).mount("#app");
<!-- #app: <div id="app"></div> 여기를 관리하는 인스턴스 -->2. data 옵션
- 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용
- 반드시 객체를 리턴하는 함수로 정의
- 리턴 객체 - Proxy로 래핑
data() {
return {name: ""};
},
<!--리턴 안 객체가 속성별로 proxy-->- data에 대한 Proxy 직접 접근
- vm.$data : data 옵션으로 구성된 proxy 객체
vm.$data.name:
- vm.$data : data 옵션으로 구성된 proxy 객체
vm.name = "Hello"
> "Hello"
vm.$data.name
> "Hello"$, _ 로 시작하는 이름을 data 객체의 속성명으로 사용하면 안 됨
3. 계산된 속성 (Computed Property)
- data나 다른 속성이 변경될 때 함수가 실행되어 저장된 캐싱된 값
- 함수의 실행은 의존하고 있는 속성 또는 data가 변경될 때 한 번 호출됨
- computed 옵션에 함수를 등록
- 함수명이 계산된 속성명이 됨
<body>
<div id="app">
1보다 큰 수: <input type="text" v-model.number="num" /> <br />
<!-- sum()함수는 단 한번만 호출됨 -->
1부터 입력한 값까지의 합: <span>{{sum}}</span><br />
1부터 입력한 값까지의 합: <span>{{sum}}</span><br />
1부터 입력한 값까지의 합: <span>{{sum}}</span><br />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
let vm = Vue.createApp({
name: 'App',
data() {
return { num: 0 };
},
computed: {
sum() {
console.log('Num: ' + this.num);
let n = parseInt(this.num);
if (Number.isNaN(n)) return 0;
return (n * (n + 1)) / 2;
},
},
}).mount('#app');
</script>
</body>
4. 메서드
- Vue 인스턴스에서 사용할 메서드를 등록하는 옵션
- 인스턴스에서 직접 호출 / 디렉티브 표현식, 콧수염{{}} 표현식에서 호출
- 이벤트 핸들러로 이용 가능 (▶이벤트 핸들러는 메서드에서 정의한다)
<body>
<div id="app">
1보다 큰 수: <input type="text" v-model.number="num" /> <br />
<!-- sum(): 랜더링될때 메서드 직접 호출 -->
1부터 입력한 값까지의 합: <span>{{sum()}}</span><br />
1부터 입력한 값까지의 합: <span>{{sum()}}</span><br />
1부터 입력한 값까지의 합: <span>{{sum()}}</span><br />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
let vm = Vue.createApp({
name: 'App',
data() {
return { num: 0 };
},
methods: {
sum() {
console.log('Num: ' + this.num);
let n = parseInt(this.num);
if (Number.isNaN(n)) return 0;
return (n * (n + 1)) / 2;
},
},
}).mount('#app');
</script>
</body>
- 메서드 : 템플릿으로 렌더링할 때 호출
- 계산된 속성 : 미리 호출하여 캐싱해둔 값을 렌더링할 때 반복적으로 사용
∴ 동일한 값을 같은 화면에 여러 번 출력할 경우 => 계산된 속성 사용
5. 관찰 속성 (Watched Property)
- JS 코드에서 데이터가 변경 된 경우
- 이를 감지하여 다른 JS 코드를 실행하고자 할 때
- 주로 긴 처리 시간이 필요한 비동기 처리에 적합
- watch 옵션
- 함수로 정의
- data 속성명과 동일하게 함수명 정의
- 매개변수 :
(변경 후 값, 변경 전 값)
</head>
<body>
<div id="app">
x: <input type="text" v-model.number="x" /><br />
y: <input type="text" v-model.number="y" /><br />
덧셈 결과: {{sum}}
</div>
<script src="https://unpkg.com/vue"></script>
<script>
let vm = Vue.createApp({
name: 'App',
data() {
return { x: 0, y: 0, sum: 0 };
},
// 감시대상: x
watch: {
x(current, old) {
console.log(`x: ${old} --> ${current}`);
var result = Number(current) + Number(this.y);
if (isNaN(result)) this.sum = 0;
else this.sum = result;
},
// 감시대상: y
y(current, old) {
console.log(`y: ${old} --> ${current}`);
var result = Number(current) + Number(this.x);
if (isNaN(result)) this.sum = 0;
else this.sum = result;
},
},
}).mount('#app');
</script>
</body>
