基础入门:vue.js 生命周期钩子函数
1、生命周期图示
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数。
2、生命周期钩子函数(最常用的是 mounted、updated 和 unmounted)
-
beforeCreate:在组件实例初始化完成之后立即调用。
-
Created:在组件实例处理完所有与状态相关的选项后调用。
-
beforeMount:在组件被挂载之前调用。
-
Mounted:在组件被挂载之后调用。
-
beforeUpdate:在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
-
Updated:在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
-
beforeUnmount:在一个组件实例被卸载之前调用。
-
Unmounted:在一个组件实例被卸载之后调用。
-
errorCaptured:在捕获了后代组件传递的错误时调用。
-
renderTracked:在一个响应式依赖被组件的渲染作用追踪后调用。
-
renderTriggered:在一个响应式依赖被组件触发了重新渲染之后调用。
-
Activated:若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用。
这个钩子在服务端渲染时不会被调用。
-
Deactivated:若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用。这个钩子在服务端渲染时不会被调用。
-
serverPrefetch:当组件实例在服务器上被渲染之前要完成的异步函数。
-
onMounted():注册一个回调函数,在组件挂载完成后执行。
-
onUpdated():注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。
-
onUnmounted():注册一个回调函数,在组件实例被卸载之后调用。
-
onBeforeMount():注册一个钩子,在组件被挂载之前被调用。
-
onBeforeUpdate():注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
-
onBeforeUnmount():注册一个钩子,在组件实例被卸载之前调用。
-
onErrorCaptured():注册一个钩子,在捕获了后代组件传递的错误时调用。
-
onRenderTracked()注册一个调试钩子,当组件渲染过程中追踪到响应式依赖时调用。这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
-
onRenderTriggered():注册一个调试钩子,当响应式依赖的变更触发了组件渲染时调用。这个钩子仅在开发模式下可用,且在服务器端渲染期间不会被调用。
-
onActivated():注册一个回调函数,若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用。这个钩子在服务器端渲染期间不会被调用。
-
onDeactivated():注册一个回调函数,若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用。这个钩子在服务器端渲染期间不会被调用。
-
onServerPrefetch():注册一个异步函数,在组件实例在服务器上被渲染之前调用。
部分内容转载自:https://cn.vuejs.org/guide/essentials/lifecycle.html
源代码:
App.vue:
<script>
import Hello from './components/Hello.vue'
export default{
data(){
return{
isShow:true
}
},
components:{
Hello
}
}
</script>
<template>
<Hello v-if="isShow"></Hello>
<button @click="isShow=!isShow">控制</button>
</template>
<style>
</style>
Hello.vue:
<script>
export default{
data(){
return{
counter:0
}
},
methods:{
changeCon:function(){
this.counter=this.counter+1
}
},
beforeCreate(){
console.log('beforeCreate')
},
created(){
console.log('created')
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('updated')
},
beforeUnmount(){
console.log('beforeUnmount')
},
unmounted(){
console.log('unmounted')
}
}
</script>
<template>
<div>
<h2>{{counter}}</h2>
<button @click="changeCon">更改</button>
</div>
</template>
<style>
</style>
源代码运行情况: