生命周期
生命周期
-
vue 组件实例都有自己的一个生命周期
-
从创建->初始化数据->编译模版->挂载实例到 DOM->数据变更后更新 DOM ->卸载组件
-
生命周期简单说就是 vue 实例从创建到销毁的过程
生命周期钩子
在各个周期运行时,会执行钩子函数,让开发者有机会在特定阶段运行自己的代码。这就是生命周期钩子
官方示意图:
生命周期钩子函数
钩子函数 | 说明 |
---|---|
beforeCreate | 在实例初始化之后 调用 |
created | 实例已经创建完成之后调用 |
beforeMount | 在挂载开始之前被调用 |
mounted | 在组件挂载完成后执行 |
beforeUpdate | 在组件即将因为响应式状态变更而更新其 DOM 树之前调用 |
updated | 在组件因为响应式状态变更而更新其 DOM 树之后调用 |
beforeDestroy | 实例销毁之前调用 |
destroyed | 实例销毁后调用 |
<script lang="ts" setup>
import {
ref,
reactive,
onBeforeMount, // 在组件挂载之前执行的函数
onMounted,
onBeforeUpdate, // 在组件修改之前执行的函数
onUpdated,
onBeforeUnmount, // 在组件卸载之前执行的函数
onUnmounted
} from 'vue'
// setup 替代了 beforeCreate setup
// reactive 创建响应式对象
let data = reactive({
// 定义响应式数据
count: 0
})
const clickMe = () => {
data.count++
alert('hi')
}
console.log('1-开始创建组件-----setup()')
onBeforeMount(() => {
console.log('2-组件挂载到页面之前执行-----onBeforeMount()')
})
onMounted(() => {
console.log('3-组件挂载到页面之后执行-----onMounted()')
})
onBeforeUpdate(() => {
console.log('4-组件更新之前-----onBeforeUpdate()')
})
onUpdated(() => {
console.log('5-组件更新之后-----onUpdated()')
})
onBeforeUnmount(() => {
console.log('6-组件卸载之前-----onBeforeUnmount()')
})
onUnmounted(() => {
console.log('7-组件卸载之后-----onUnmounted()')
})
</script>
<template>
<div class="container">
<p>数字为{{ data.count }}</p>
<button @click="clickMe">修改数据</button>
</div>
</template>
<style lang="scss" scoped>
.container {
}
</style>
VUE3 与 VUE2 生命周期的对比
setup 方式
vue2 vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
通过这样对比,
-
可以很容易的看出 vue3 的钩子函数基本是再 vue2 的基础上加了一个 on,但也有两个钩子函数发生了变化。
-
BeforeDestroy 变成了 onBeforeUnmount
-
destroyed 变成了 onUnmounted
尤大的介绍是 mount 比 Destroy 更形象,也和 beforeMount 相对应。文章来源:https://www.toymoban.com/news/detail-823060.html
onServerPrefetch() (ssr) 在组件实例在服务器上被渲染之前调用文章来源地址https://www.toymoban.com/news/detail-823060.html
到了这里,关于vue3-生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!