宿州网站制作公司,鄂尔多斯网站建设,做的网站图片不显示,saas云建站平台源码1.vue3生命周期官方流程图 2.vue3中的选项式生命周期
vue3中的选项式生命周期钩子基本与vue2中的大体相同#xff0c;它们都是定义在 vue实例的对象参数中的函数#xff0c;它们在vue中实例的生命周期的不同阶段被调用。生命周期函数钩子会在我们的实例挂载#xff0c;更新…1.vue3生命周期官方流程图 2.vue3中的选项式生命周期
vue3中的选项式生命周期钩子基本与vue2中的大体相同它们都是定义在 vue实例的对象参数中的函数它们在vue中实例的生命周期的不同阶段被调用。生命周期函数钩子会在我们的实例挂载更新卸载等过程中被调用的函数
以下是vue3中的主要选项式生命周期函数钩子
beforeCreate在实例初始化之后、数据观测(data observer)和event/watcher事件配置之前被调用。created在实例创建完成后被立即调用此阶段完成了数据观测但未挂载Dom$el属性beforeMount在挂载开始之前被调用相关的render函数首次被调用。mounted实例被挂载后调用此时el被新创建的vm.$el替换。beforeUpdate数据更新之前被调用发生在虚拟DOM打重新渲染及打补丁之前。updated:由于数据更改导致的虚拟Dom重新渲染及打补丁在这之后会调用该钩子。beforeUnmount实例销毁之前调用。在这一步实例仍然完全可用。unmountedVue实例销毁后调用。
代码展示 // 通过配置项的形式使用生命周期构子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)}以上例子定义了一个Vue实例每一个生命周期钩子函数都会在相应的阶段执行并打印对应的生命周期钩子名称。这提供了在不同阶段进行定制化操作的可能例如我们可以在mounted生命周期钩子中进行DOM操作在created生命周期钩子中进行数据的初始化等 3.vue3中组件式生命周期
vue3的组合式API有一套新生命周期钩子与vue3中选项式生命周期函数钩子有着对应的关系。
在Composition API中组合式生命周期钩子有 onBeforeMount对应Vue2中的beforeMount钩子Vue实例挂载之前调用。 onMounted对应Vue2中的mounted钩子Vue实例挂载完成后调用。 onBeforeUpdate对应Vue2中的beforeUpdate钩子数据更新时调用但在DOM更新前。 onUpdated对应Vue2中的updated钩子数据更新后在DOM更新后调用。 onBeforeUnmount对应Vue2中的beforeDestroy钩子Vue实例销毁前调用。 onUnmounted对应Vue2中的destroyed钩子Vue实例销毁后调用。
代码展示 import {ref,onBeforeMount,onMounted,onBeforeMount,onUpdated,onBeforeUnmount,onUnmounted} from vueexport default {setup() {const name ref(Vue3);onBeforeMount(() {console.log(onBeforeMount);});onMounted(() {console.log(onMounted);});return {name};}
}生命周期钩子的主要作用是在特定时点运行用户自定义的函数这些函数可能包含数据获取、数据处理、状态修改等逻辑。利用这样的设计开发者可以更好的控制代码执行的时机和逻辑。 在组合式API中这些生命周期钩子不再像Vue2那样作为组件选项存在而是独立的函数。这使得我们可以把相关逻辑组合在一起理解和复用更方便。 4.vue3中选项式生命周期和组合式生命周期共存时的执行顺序
在Vue3中组合式API和选项式API可以共存对于生命周期钩子在二者同时使用的情况下其执行顺序为首先执行组合式API的生命周期钩子然后执行选项式API的生命周期钩子。
比如在一个实体中同时使用了组合式API的onMounted和选项式API的mounted则执行顺序为先执行onMounted然后执行mounted。
以下是一个简单的例子 import { onMounted } from vueexport default {mounted() {console.log(选项式API的mounted生命周期钩子)},setup() {onMounted(() {console.log(组合式API的onMounted生命周期钩子)});}
}控制台输出的结果应该是 组合式API的onMounted生命周期钩子 选项式API的mounted生命周期钩子 这就完成了检验生命周期钩子执行顺序的验证首先是组合式API的onMounted然后是选项式API的mounted。
