vue3中的生命周期
1、通过组合式API的形式去使用生命周期钩子Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedVue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:beforeCreate===>setup()created=
·
1、通过组合式API的形式去使用生命周期钩子
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
语法如下:
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue' setup(){ console.log('---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} }
例子:
2、通过配置项的形式使用生命周期钩子
由如下例子可知:setup是优于 beforeCreate的
3、组合式API形式和配置项的形式对比
可以看见 组合式API先于配置项执行
代码:
<template> <h2>当前求和为:{{ sum }}</h2> <button @click="sum++">点我+1</button> </template> <script> import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, } from "vue"; export default { name: "Demo", setup() { console.log("---setup---"); //数据 let sum = ref(0); //通过组合式API的形式去使用生命周期钩子 //#region onBeforeMount(() => { console.log("---onBeforeMount---"); }); onMounted(() => { console.log("---onMounted---"); }); onBeforeUpdate(() => { console.log("---onBeforeUpdate---"); }); onUpdated(() => { console.log("---onUpdated---"); }); onBeforeUnmount(() => { console.log("---onBeforeUnmount---"); }); onUnmounted(() => { console.log("---onUnmounted---"); }); //#endregion //返回一个对象(常用) return { sum }; }, //通过配置项的形式使用生命周期钩子 //#region 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---"); }, //#endregion }; </script>
参考链接:
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=155&spm_id_from=pageDriver
更多推荐
已为社区贡献4条内容
所有评论(0)