【Vue】生命周期一文详解
目录
一、beforeCreate
下面是一个beforeCreate的简单使用示例：
在控制台输出'before create hook'。
二、created
下面是一个created的简单使用示例：
在控制台输出'created hook'。
三、beforeMount
下面是一个beforeMount的简单使用示例：
在真实DOM生成后，页面会显示'hello world'。
四、mounted
下面是一个mounted的简单使用示例：
控制台输出组件的innerText。
五、beforeUpdate
下面是一个beforeUpdate的简单使用示例：
在调用changeMessage方法之后，控制台会输出'before update message: before update hook message'。
六、updated
下面是一个updated的简单使用示例：
在调用changeMessage方法之后，控制台会输出'updated message: hello world'。
七、beforeUnmount
下面是一个beforeUnmount的简单使用示例：
在组件DOM节点从页面中移除之前，控制台会输出'before unmount'。
八、unmounted
下面是一个unmounted的简单使用示例：
在组件DOM节点从页面中移除之后，控制台会输出'unmount'。
以上就是Vue3的各个生命周期钩子函数的详细解释和使用方法，希望可以对读者有所帮助。
Vue3是Vue.js的最新版本，其生命周期相对于Vue.js 2.x版本有所改变，本文将详细介绍Vue3的各个生命周期，包括其执行顺序、作用、使用方法以及配合代码案例
一、beforeCreate
beforeCreate钩子函数是在Vue3实例被创建之初执行的，此时Vue3实例中的数据和方法都还未初始化，因此在beforeCreate中无法访问到组件的data、computed、methods等属性。
下面是一个beforeCreate的简单使用示例：
<script>
export default {
beforeCreate() {
console.log('before create hook')
}
}
</script>在控制台输出'before create hook'。
二、created
created钩子函数是在Vue3实例被创建后立即执行的，此时Vue3实例中的数据已经被初始化，但是模板还未生成，因此在created中无法访问到组件的DOM节点。
下面是一个created的简单使用示例：
<script>
export default {
created() {
console.log('created hook')
}
}
</script>在控制台输出'created hook'。
三、beforeMount
beforeMount钩子函数在Vue3实例的模板挂载到真实DOM之前执行，此时Vue3实例已经将数据和模板联系起来，但是还未生成DOM节点，可以在此时修改数据，这样修改后的数据会在真实DOM生成后立即呈现出来。
下面是一个beforeMount的简单使用示例：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'before mount hook message'
}
},
beforeMount() {
this.message = 'hello world'
}
}
</script>在真实DOM生成后，页面会显示'hello world'。
四、mounted
mounted钩子函数在Vue3实例的模板已经挂载到真实DOM之后执行，此时Vue3实例已经生成了DOM节点，并将数据绑定到了DOM节点上，此时可以访问组件的DOM节点。
下面是一个mounted的简单使用示例：
<template>
<div ref="message">{{ message }}</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.message.innerText)
}
}
</script>控制台输出组件的innerText。
五、beforeUpdate
beforeUpdate钩子函数在Vue3实例的数据发生改变，但是还未更新DOM节点之前执行，此时可以在beforeUpdate中获取到新的数据和旧的数据，以及修改之前的DOM节点状态。
下面是一个beforeUpdate的简单使用示例：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'before update hook message'
}
},
methods: {
changeMessage() {
this.message = 'hello world'
}
},
beforeUpdate() {
console.log(`before update message: ${this.message}`)
}
}
</script>在调用changeMessage方法之后，控制台会输出'before update message: before update hook message'。
六、updated
updated钩子函数在Vue3实例的数据发生改变并且DOM节点已经更新之后执行，此时可以访问到最新的DOM节点状态。
下面是一个updated的简单使用示例：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'updated hook message'
}
},
methods: {
changeMessage() {
this.message = 'hello world'
}
},
updated() {
console.log(`updated message: ${this.message}`)
}
}
</script>在调用changeMessage方法之后，控制台会输出'updated message: hello world'。
七、beforeUnmount
beforeUnmount钩子函数在Vue3实例被销毁之前执行，此时可以对Vue3实例进行一些清理工作，如清除定时器、取消订阅等操作。
下面是一个beforeUnmount的简单使用示例：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'before unmount hook message'
}
},
mounted() {
setTimeout(() => {
this.$el.remove()
}, 3000)
},
beforeUnmount() {
console.log('before unmount')
}
}
</script>在组件DOM节点从页面中移除之前，控制台会输出'before unmount'。
八、unmounted
unmounted钩子函数在Vue3实例被销毁之后执行，此时Vue3实例已经从内存中移除，可以在此时清除定时器、取消订阅、释放内存等操作。
下面是一个unmounted的简单使用示例：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'unmount hook message'
}
},
mounted() {
setTimeout(() => {
this.$el.remove()
}, 3000)
},
unmounted() {
console.log('unmount')
}
}
</script>