본문 바로가기
ETC/Vue.js

beforeCreate / created Vue 생성주기

by java나유 2022. 12. 19.

Vue 라이프사이클 다이어그램

 <script>
 var vm1 = new Vue({
//Vue객체가 관리할 요소들이 만들어지기 전에 호출되는 함수
data : {
	a1:100
},

beforeCreate : function(){
	console.log('Vue 객체가 관리할 요소들이 만들어지기 전 입니다.')
	console.log(this.a1)
},

//Vue객체가 만들어진 후 
created : function (){
	console.log('Vue 객체가 관리할 요소들이 만들어진 후 입니다.')
	console.log(this.a1)
}
 })

 </script>

 beforeCreate 는 객체가 관리할 요소들이 만들어지기 전에 생기는 함수

created는 객체가 만들어진 후에 생기는 함수이다.

 

**console.log(a1)  으로 하면 찍히지 않음. this.a1으로 작성해야 찍힘

 

 

el : '#test1'

를 대시한 태그도 있다.

해당 태그가 // 되었다고 생각하고

vm1.$mount('#test1')

를 vue안에 적어주기만 하면 해당 기능을 대신한다.

 

 

전체코드

<script>
	window.onload = function() {
		var vm1 = new Vue({
			//el : '#test1',
			//Vue 객체가 관리할 요소들이 만들어지기 전에 호출되는 함수
			data : {
				a1 : 100
			},

			beforeCreate : function() {
				console.log('Vue 객체가 관리할 요소들이 만들어지기 전 입니다.')
				console.log(this.a1)
			},

			//Vue 객체가 만들어진 후 
			created : function() {
				console.log('Vue 객체가 관리할 요소들이 만들어진 후 입니다.')
				console.log(this.a1)
			},
			//Vue 객체가 관리할 HTML 태그 객체가 할당 되기 전 
			beforeMount : function() {
				console.log('Vue 객체가 관리할 태그가 할당 되기 전입니다.')
			},
			//Vue 객체가 관리할 HTML 태그 객체가 할당 된 후 
			mounted : function() {
				console.log('Vue 객체가 관리할 태그가 할당 된 이후입니다.')
			},
			beforeUpdate : function() {
				console.log('관리하고있는 HTML요소 내부가 변경되기 전입니다.')
			},
			updated : function() {
				console.log('관리하고있는 HTML요소 내부가 변경된 후입니다.')
			},
			beforeDestroy : function() {
				console.log('Vue 객체 기능이 소멸되기 전입니다.')
			},
			destroyed : function() {
				console.log('Vue 객체 기능이 소멸된 후 입니다.')
			},
			methods : {
				setValue : function() {
					this.a1 = 200
				}
			}

		})
		//함수로 el: 처럼 사용 
		vm1.$mount('#test1')
		//destroy() Vue객체에 마운트 된 태그를 관리하는 요소를 소멸
		vm1.$destroy()
		vm1.$mount('#test1')
	}
</script>
</head>
<body>
	<div id="test1">
		<h3>{{a1}}</h3>
		<button type="button" @click='setValue'>값변경</button>
	</div>
</body>
</html>

 

728x90

댓글