vue3 生命周期,代码说明
vue3 生命周期,代码说明
Vue 3的生命周期函数与Vue 2有一些区别。下面是Vue 3中常用的生命周期函数及其详细基本语法示例:
beforeCreate
:在实例被创建之前调用
import { createApp } from 'vue';
createApp({
beforeCreate() {
console.log('beforeCreate');
}
}).mount('#app');
created
:在实例创建完成后调用,可以访问到实例的属性和方法,但无法访问DOM元素
import { createApp } from 'vue';
createApp({
created() {
console.log('created');
console.log(this.$data); // 访问数据
console.log(this.$props); // 访问属性
console.log(this.$options); // 访问选项
console.log(this.$refs); // 访问子组件引用
console.log(this.$el); // 无法访问
}
}).mount('#app');
beforeMount
:在实例挂载之前调用,此时尚未渲染虚拟DOM
import { createApp } from 'vue';
createApp({
beforeMount() {
console.log('beforeMount');
}
}).mount('#app');
mounted
:在实例挂载之后调用,此时已经渲染了虚拟DOM,并且可以访问到DOM元素
import { createApp } from 'vue';
createApp({
mounted() {
console.log('mounted');
console.log(this.$el); // 访问DOM元素
}
}).mount('#app');
beforeUpdate
:在响应式数据更新之前调用,即在DOM更新之前调用
import { createApp } from 'vue';
createApp({
beforeUpdate() {
console.log('beforeUpdate');
}
}).mount('#app');
updated
:在响应式数据更新之后调用,即在DOM更新之后调用
import { createApp } from 'vue';
createApp({
updated() {
console.log('updated');
}
}).mount('#app');
beforeUnmount
:在实例销毁之前调用
import { createApp } from 'vue';
createApp({
beforeUnmount() {
console.log('beforeUnmount');
}
}).mount('#app');
unmounted
:在实例销毁之后调用
import { createApp } from 'vue';
createApp({
unmounted() {
console.log('unmounted');
}
}).mount('#app');
注意:Vue 3中的beforeDestroy
和destroyed
生命周期函数已被替换为beforeUnmount
和unmounted
。
原文地址:https://blog.csdn.net/qq_38105536/article/details/142366220
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!