一起来聊聊Vue3的这“一生(生命周期)” | 您所在的位置:网站首页 › 蜗牛生命周期图 › 一起来聊聊Vue3的这“一生(生命周期)” |
什么是生命周期:
vue中每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。 vue2和vue3中生命周期的对比:对Vue2生命周期不熟悉的同学可以看我的另一篇文章Vue2的生命周期 Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名: beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下: beforeCreate===>setup() created=======>setup() beforeMount ===>onBeforeMount mounted=======>onMounted beforeUpdate===>onBeforeUpdate updated =======>onUpdated beforeUnmount ==>onBeforeUnmount unmounted =====>onUnmounted 生命周期图解下图展示了实例的生命周期图 Vue2生命周期图
Vue3生命周期图
下面我们通过这个图来分析vue3的生命周期和vue2有什么区别 我们可以看到与Vue2不同的是Vue3中上来首先需要调用createApp() 然后传入配置项返回一个实例对象 并且需要.mount() 传出el 需要明确的指定服务于哪个容器 把所有的配置准备好了之后在往下走 所以在Vue3中少了一个判断是否配置了el 还有就是在最后卸载阶段的两个api的名字发生了改变 在Vue3中卸载的api分别为 beforeUnmount 、unmounted 代码演示下面我们通过代码来演示vue的生命周期 我们在App组件中使用了一个Hello组件 为了能具体的演示生命周期的卸载阶段 我们在Hello组件加了一个v-if判断来演示组件的卸载 点击是否显示组件 import { ref } from "vue"; import Hello from './components/Hello.vue' export default { name: "App", components: { Hello }, setup() { // 为了能演示出来卸载的效果我们在这定义一个布尔值 是否显示组件 let isShow = ref(true) return { isShow } }, };我们所有的生命周期函数将在Hello组件中定义 我是Holle组件 当前的值是:{{sum}} 点击加1 import { ref } from 'vue' export default { name: "Hello", setup() { let sum = ref(0) return { sum } }, //通过配置项的形式使用生命周期钩子 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---"); }, };运行出来我们可以看到所有的生命周期钩子都是按顺序触发的 一进入触发创建和挂载流程 放当我们修改数据后 触发更新流程 最后我们不想看了 点击关掉组件 触发卸载流程 Composition API 形式的生命周期钩子 Vue3.0提供了 Composition API 形式的生命周期钩子 可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。 因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。 这些函数接受一个回调函数,当钩子被组件调用时将会被执行 下面我们通过代码的形式演示:Composition API 形式的生命周期钩子的写法 (使用之前需要先引入) ... // 引入api import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue' export default { name: "Hello", setup() { let sum = ref(0); //通过组合式API的形式去使用生命周期钩子 onBeforeMount(() => { console.log("---onBeforeMount---"); }); onMounted(() => { console.log("---onMounted---"); }); onBeforeUpdate(() => { console.log("---onBeforeUpdate---"); }); onUpdated(() => { console.log("---onUpdated---"); }); onBeforeUnmount(() => { console.log("---onBeforeUnmount---"); }); onUnmounted(() => { console.log("---onUnmounted---"); }); return { sum, }; }, }; ...下面我们在浏览中查看输出的信息, 一上来触发挂载时的钩子 我们点击+1触发页面的更新这个时候更新的钩子就被触发 在我们点击卸载组件的时候 卸载阶段的钩子触发 一个小的补充:在使用了组合式API写了生命周期钩子,同时又使用了配置项的形式写了生命周期钩子 组合式API的优先级要高于配置项形式的生命周期钩子 组合式API定义的钩子会先执行。 |
CopyRight 2018-2019 实验室设备网 版权所有 |