8.0 vue3生命周期
Vue3 生命周期 8.0
2023-09-11 14:22:28 时间
上一篇:vue3 watchEffect函数https://blog.csdn.net/qq_42543244/article/details/122291727
记录vue3的生命周期,于vue2相比,变化并不算很大,最大的变化是,组合式的开发,意味着如果需要在某个生命周期中写点代码,那么前提是必须引入,然后叫法单词上发生的一些变化,先看官网给出的周期图:
vue2:
vue3:
然后有两种写法,为了能更好的呈现出来,我就直接贴代码了:
父组件(因为生命周期中有卸载前,已卸载的周期函数,所以我在父组件中进行了v-if的切换)
<template>
<button @click="isShow = !isShow">点击切换隐藏/显示</button>
<demo v-if="isShow"></demo>
</template>
<script>
import {
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from "vue";
import Demo from "@/components/Demo.vue";
export default {
name: "App",
components: {
Demo,
},
setup() {
let isShow = ref(true);
console.log("----parent-setup----");
onBeforeMount(() => {
console.log("----parent-onBeforeMount----");
});
onMounted(() => {
console.log("----parent-onMounted----");
});
onBeforeUpdate(() => {
console.log("----parent-onBeforeUpdate----");
});
onUpdated(() => {
console.log("----parent-onUpdated----");
});
onBeforeUnmount(() => {
console.log("----parent-onBeforeUnmount----");
});
onUnmounted(() => {
console.log("----parent-onUnmounted----");
});
return { isShow };
},
};
</script>
子组件(Demo.vue)
<template>
<div>Demo组件内容</div>
<div>{{ num }}</div>
<button @click="num++">点击+1</button>
</template>
<script>
import {
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from "vue";
export default {
name: "Demo",
/*
vue3 的生命周期和 vue2的很相似,基本保持一致,最后的 destory 改成了 unmount
使用方法有两种,一种是声明式的,即写在setup外面 与setup同级
一种是组合式的,需要先进行引入 ,,根据个人喜好选择一种即可,也可以全写,但需要注意执行顺序
*/
/* 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----");
}, */
setup() {
/* 在setup中使用组合式api,生命周期函数需要事先引入,组合式内的生命周期执行顺序是要快于声明式的生命周期
组合式的引入是没有 onBeforeCreate,onCreated的,认为setup即为beforeCreate,created
*/
let num = ref(1);
console.log("----children-setup----");
onBeforeMount(() => {
console.log("----children-onBeforeMount----");
});
onMounted(() => {
console.log("----children-onMounted----");
});
onBeforeUpdate(() => {
console.log("----children-onBeforeUpdate----");
});
onUpdated(() => {
console.log("----children-onUpdated----");
});
onBeforeUnmount(() => {
console.log("----children-onBeforeUnmount----");
});
onUnmounted(() => {
console.log("----children-onUnmounted----");
});
return { num };
},
};
</script>
大概就是这些,演示下,父子组件的渲染顺序
(父组件setup --- > 父组件挂载前 ---> 子组件setup--->子组件挂载前--->子组件挂载后--->父组件键挂载后)
就到这里吧!
下一篇:
vue3 自定义hook函数https://blog.csdn.net/qq_42543244/article/details/122644055
相关文章
- 【Vue】vue3路由的安装及页面切换传参(params)简单示例(图文+完整源代码)
- 【Vue3】通过provide和inject实现【祖组件与子组件】数据传参
- 【Vue3】Vue3中的生命周期及先后次序
- 【Vue3】Vue3中计算属性computed的用法示例(图文+代码)
- Vue3 Provide 和 Inject 实现状态管理
- Vue3.x使用Echarts绘制世界地图并进行定点
- vue3 v-model 双向更新
- Vue3新特性体验--中(Composition API)
- vue2与vue3的区别(这些一定要了解)
- vue3生命周期详解
- Vue3+elementplus搭建通用管理系统实例九:通用表格实现下
- Vue3+elementplus搭建通用管理系统实例四:找回密码界面实现
- Vue3响应式原理
- Vue3之readonly与shallowReadonly
- 从 jQuery 到 Vue3 的快捷通道
- 使用Vue3学习Vue的基础知识
- 浅析Vue3 CompositionAPI如何替换Vue Mixins:mixin的缺点(命名冲突、隐式依赖)、CompositionAPI如何解决这些缺陷(代码提取、代码重用)
- 浅析Vue3相关基础知识点:setup()入口函数、ref()定义响应式数据、reactive()定义多个响应式数据-深层的、toRefs()转换为每个属性都是一个ref、computed()计算属性、watch()监听数据、watchEffect()监听数据变化执行回调、生命周期对比、provide/inject跨层级组件通信
- 零基础,一周内基于Vue3写出一个CURD系统
- vue3中使用echart
- 27 vue3 Pinia取值