Vue의 라이프사이클 후크 기능이란 무엇입니까?
- WBOY원래의
- 2022-03-16 10:44:473913검색
Vue에서 라이프 사이클 후크 함수는 라이프 사이클이 DOM 생성 및 업데이트 프로세스를 거칠 때 실행되는 일부 함수를 나타내며 이러한 함수 내에서 생성 및 선언될 수 있습니다.
이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.
Vue의 라이프사이클 후크 기능은 무엇인가요?
각 Vue 인스턴스는 일련의 초기화 단계를 거칩니다. 생성 시 데이터 설정부터 템플릿 컴파일, 인스턴스를 DOM에 로드, 마지막으로 데이터 변경 시 DOM 업데이트까지. 이 프로세스를 Vue 인스턴스의 수명 주기라고 합니다. 기본적으로 DOM을 생성하고 업데이트하는 과정을 거치면서 이러한 함수 내에서 Vue 구성 요소가 생성되고 선언됩니다. 라이프 사이클.
Vue에는 8가지 수명 주기 방법이 있습니다.
생성 전
Created
Mount 전
Mounted
업데이트 전
업데이트
-
파괴 전
Destroyed
이 기사에서는 이러한 모든 후크에 대해 배우고 각 단계의 예를 배우게 됩니다.
이 기사에서는 src 폴더 내의 구성 요소 폴더에 있는 테스트 구성 요소를 사용합니다.
// src/components/Test.vue
<template>
<div>
</div>
</template>
<script>
export default {
name: ‘Test’,
props: {
msg: String
}
}
</script>
<! — Add “scoped” attribute to limit CSS to this component only →
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>이 튜토리얼에서 스크립트 섹션은 다양한 후크 사례에 대해 개별적으로 사용됩니다.
beforeCreate()
이것은 Vue.js에서 호출되는 첫 번째 수명 주기 후크이며, Vue 인스턴스가 초기화된 직후에 호출됩니다.
<script>
export default {
name: 'Test',
beforeCreate() {
alert('beforCreate hook has been called');
console.log('beforCreate hook has been called');
}
}
</script>개발환경에서 프로그램을 실행하여 인터페이스를 확인할 수 있습니다.
npm run submit
컴포넌트를 로드하기 전에 라이프 사이클 후크에 작성된 경고 문이 먼저 실행된다는 점에 유의하세요. 이는 Vue 엔진이 애플리케이션 구성요소를 생성하기 전에 호출될 때 함수가 작동하는 방식과 정확히 같습니다. 현재는 beforeCreate 단계이고, 계산된 속성, 관찰자, 이벤트, 데이터 속성, 작업 등은 아직 설정되지 않았습니다.
created()
짐작하셨듯이 이것은 beforeCreated 후크 바로 다음에 호출되는 두 번째 수명 주기 후크입니다. 이 단계에서 Vue 인스턴스가 초기화되었으며 계산된 속성, 관찰자, 이벤트, 데이터 속성 및 후속 작업이 활성화되었습니다.
<script>
export default {
name: 'Test',
data() {
return {
books: 0
}
},
created() {
alert('Created hook has been called');
console.log(`books is of type ${typeof this.books}`);
}
}
</script>프로그램을 실행하면 이제 데이터 유형이 표시되는 것을 볼 수 있습니다. beforeCreated 단계에서는 활성화가 아직 발생하지 않았기 때문에 이는 불가능합니다. 하지만 이 단계에서는 Vue 인스턴스가 설치되지 않았으므로 여기서 DOM을 조작할 수 없으며 요소 속성을 아직 사용할 수 없습니다.
beforeMount()
인스턴스가 DOM에 마운트되기 전의 순간입니다. 템플릿과 범위가 지정된 스타일이 여기에서 컴파일되지만 여전히 DOM을 조작할 수 없으며 요소 속성을 여전히 사용할 수 없습니다.
<script>
export default {
beforeMount() {
alert('beforeMount is called')
}
}
</script>mounted()
이것은 beforeMounted 이후에 호출되는 다음 수명 주기 후크입니다. 인스턴스가 설치된 직후에 호출됩니다. 이제 프로젝트의 앱 구성요소 또는 기타 구성요소를 사용할 수 있습니다. 이제 데이터를 템플릿에 맞추고, DOM 요소를 데이터가 채워진 요소로 바꾸는 등의 작업을 수행할 수 있으며, 요소 속성을 사용할 수 있습니다.
<script>
export default {
mounted() {
alert('mounted has been called');
}
}
</script>처음에 보았듯이 설치가 이미 main.js 파일에서 이루어졌기 때문에 Vue CLI를 사용하여 생성된 프로젝트의 기본 위치입니다. 인스턴스가 기본적으로 이미 설치되어 있으므로 다른 후크를 사용하지 못할 수도 있는 이유입니다.
beforeUpdate()
여기에서 업데이트해야 할 데이터를 변경하세요. 이 단계는 이벤트 리스너 제거와 같은 변경을 수행하기 전의 모든 논리에 적합합니다.
<template>
<div> {{hello}}
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
books: 0,
hello: 'welcome to Vue JS'
}
},
beforeUpdate(){
alert('beforeUpdate hook has been called');
},
mounted(){
this.$data.hello= 'lalalalallalalalalaalal';
}
}
</script>처음에는 DOM에 환영 주석이 있지만 마운트 단계(DOM을 조작할 수 있는 단계)에서는 데이터가 변경되므로 변경 전에 beforeUpdate 경고가 나타납니다.
updated()
이 수명 주기 후크는 DOM 업데이트 직후 호출되며 beforeUpdate 후크가 호출된 후에 실행됩니다. 여기에서 DOM 관련 작업을 수행할 수 있지만 Vue가 이미 이를 위한 플랫폼을 제공하므로 이 후크 내에서 상태를 변경하는 것은 권장되지 않습니다.
<template>
<div> {{hello}}
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
books: 0,
hello: 'welcome to Vue JS'
}
},
beforeUpdate(){
alert('beforeUpdate hook has been called');
},
updated(){
alert('Updated hook has been called');
},
mounted(){
this.$data.hello= 'lalalalallalalalalaalal';
}
}
</script>beforeDestroy()
이 Vue 수명주기 후크를 호출하는 시간은 Vue 인스턴스가 삭제되기 전이며 인스턴스와 모든 기능은 그대로 유지되어 작동합니다. 이 단계에서는 리소스 관리를 수행하고, 변수를 삭제하고, 구성 요소를 정리할 수 있습니다.
<script>
export default {
name: 'Test',
data() {
return {
books: 0
}
},
beforeDestroy() {
this.books = null
delete this.books
}
}
</script>destroyed()
이것은 모든 하위 Vue 인스턴스가 삭제되고 이 단계에서 이벤트 리스너 및 모든 지시문과 같은 것이 바인딩 해제된 Vue 수명 주기의 마지막 단계입니다. 객체에 대해 destroy를 실행한 후 이를 호출하십시오.
<script>
export default {
destroyed() {
this.$destroy()
console.log(this)
}
}
</script>프로그램을 실행하고 콘솔을 보면 아무것도 보이지 않습니다.
【관련 추천: "vue.js tutorial"】
위 내용은 Vue의 라이프사이클 후크 기능이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!