버튼을 클릭하면 msg가 바뀌어서 console에 출력되도록 만들어보자
- html
<!DOCTYPE html> <html lang="ko"> <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>Vue Test</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> </head> <body> <div id="app"> <div>{{msg}}</div> <button v-on:click="changeMessage">나를 눌러주세요</button> </div> <script> const vm = new Vue({ el: '#app', data: { msg: 'message A' }, methods: { changeMessage: function() { this.msg = 'changed'; } } }) console.log('-------------') console.log(vm) console.log('-------------') </script> </body> </html>
- $ = 속성
- _ = 메서드
- vue 공식문서를 확인해보면 위의 메서드들과 속성들에 대한 설명이 자세히 나와있다
- 중간에 우리가 만든 changeMessage method가 있는것을 확인할 수 있다.
- 다음과 같이 웹브라우저에서 직접 값을 확인할수도 있고 메서드를 실행시킬 수도 있다
- 반응성은 data에 정의된 변수만 반응성을 가지게 된다.
- vue instance가 생성될때 정의된 변수가 아니면 나머지는 모두 반응성을 가지지 않는다
- 다음예제로 확인할 수 있다
- html
<!DOCTYPE html> <html lang="ko"> <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>Vue Test</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> </head> <body> <div id="app"> <div>{{msg}}</div> <div>{{msg2}}</div> <button v-on:click="changeMessage">나를 눌러주세요</button> </div> <script> const vm = new Vue({ el: '#app', data: { msg: 'message A' }, methods: { changeMessage: function() { this.msg = 'changed'; this.msg2 = 'changed2'; } } }) console.log('-------------') console.log(vm) console.log('-------------') </script> </body> </html>
- 위 코드에서 msg2는 vue가 생성될 떄 정의되지 않았다. 그렇기때문에 반응성을 가지지 않는다
- msg2는 사용자가 해당 메서드를 실행시킬 떄 생성되었기 때문에 반응성을 가지지 않는다
반응성을 가지는지 어떻게 확인할까?
- f9로 console창을 열어서 콘솔창에 vm.msg2를 변경해본다
- 변경됨에 따라 화면에서 보이는 msg2의 값 또한 바뀌면 반응성을 가진다고 할 수 있다
- 반응성을 가지게 하기 위해 msg2를 당장사용하지 않더라도, 빈문자열이라거나 null이라도 넣어주어야한다. 무조건 정의해야한다
computed
- vue의 data는 원시데이터라면 computed는 그 데이터들을 계산해서 나온 데이터
watch
- data에 정의된 변수들이 반응성이 확인될때마다 즉, 변경될때마다 어떠한 일을 수행하게 할 수 있다
lifecycle hook
- new vue를 하게되면 lifecycle이 시작된다
-
event, lifecycle을 초기화
-
beforeCreate hook 실행
-
외부 모듈 주입, 반응성 주입
-
created hook 실행 = 생성된 상태
-
el 이라는 옵션이 있는지 없는지 확인하고 templates라는 옵션도 확인
-
템플릿을 렌더링하거나 컴파일
-
beforeMount = 연결되기 바로직전싱테, 아직 vue는 html의 어떤 요소가 연결되어있는지 모름
-
(vue에) 연결된상태 : 보통 연결까지 다 되어야 data를 쓸 수 있기 때문에 mounted를 자주 쓴다
-
data가 변경될때 다음의 hook이 존재합니다
beforUpdate = data가 변경된건 아는데 화면을 다시 그리기 직전의 상태
updated = 화면 그린 직후의 상태 -
beforeDestroy = 파괴직전상태 = 이때 데이터를 백업한다든가 하는 일을 한다
-
destroy = watch에서 해제가 됨. 반응성에서 없어짐
각 hook마다 data로 등록한 msg를 출력해보면 어떤 값이 나올까?
- beforeCreate : undefined
- created, beforemount : undefined가 아니라 msg의 값이 제대로 나올 것이다. 아직 연결이 되기 전이기 때문에 vue는 html의 어떤 요소가 data에 연결되어있는건지를 모르긴 하지만 지금은 vue에서 data를 출력하고 있기 때문에 제대로 출력이 된다.
만약에 이 상태에서 data를 변경했을시에 html과 상호작용이 있어야 한다면 그 부분이 반영이 제대로 되지 않을 것이다 - 아래 코드로 증명
- html
<div id="app"> <div>{{msg}}</div> </div>
- javascript
new Vue({ el: '#app', data: { msg: 'first msg' }, create(){ this.msg = 'create' } })
- create hook을 mounted로 바꾸면 create로 출력된다
lifecycle hook 예제 (1): html 태그 내용 변경
- 각 메서드에서 msg를 출력해보자
<!DOCTYPE html>
<html lang="ko">
<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>Vue Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div ref="div1"></div>
{{msg}}
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'hi~'
},
beforeCreate () {
console.log('beforeCreated ', this.$refs.div1)
},
created(){
console.log('created ', this.$refs.div1)
},
beforeMount(){
console.log('beforeMount ', this.$refs.div1)
},
mounted(){
console.log('mounted!! ', this.$refs.div1)
},
})
console.log('-------------')
</script>
</body>
</html>- 실행결과
- html에 있는 div를 출력해야한다. 근데 html과의 연결은 mount이후이기 때문에 mounted에서만 출력이되는것을 확인할 수 있다
lifecycle hook 예제 (2): html 태그 내용 변경
<script>부분beforeUpdate(){ console.log('beforeupdated!!! '+ this.$refs.msg.innerText) }, updated(){ console.log('updated!!! '+ this.$refs.msg.innerText); }
- 실행결과
lifecycle hook 예제 (2): html destroy
- html
beforeDestroy(){ console.log('beforeDestroy '+ this.$refs.msg.innerText); }, destroyed(){ console.log('destroyed '); }
- 실행결과
- 여기서 destoyed 에도 msg를 참조하려고하면 error message가 뜨게 된다
- 만약에 console창에 vm.msg = 'newvalue'를 입력한대도 값은 변하지 않는다. 반응성이 사라졌으니까
안녕하세요!