vue3的生命周期

1.vue3生命周期官方流程图

2.vue3中的选项式生命周期

vue3中的选项式生命周期钩子基本与vue2中的大体相同,它们都是定义在 vue实例的对象参数中的函数,它们在vue中实例的生命周期的不同阶段被调用。生命周期函数钩子会在我们的实例挂载,更新,卸载等过程中被调用的函数

以下是vue3中的主要选项式生命周期函数钩子:

  1. beforeCreate:在实例初始化之后、数据观测(data observer)和event/watcher事件配置之前被调用。
  2. created:在实例创建完成后被立即调用,此阶段完成了数据观测,但未挂载Dom,$el属性
  3. beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。
  4. mounted:实例被挂载后调用,此时el被新创建的vm.$el替换。
  5. beforeUpdate:数据更新之前被调用,发生在虚拟DOM打重新渲染及打补丁之前。
  6. updated:由于数据更改导致的虚拟Dom重新渲染及打补丁,在这之后会调用该钩子。
  7. beforeUnmount:实例销毁之前调用。在这一步,实例仍然完全可用。
  8. unmountedVue实例销毁后调用。

代码展示:

javascript 复制代码
// 通过配置项的形式使用生命周期构子
  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中,组合式生命周期钩子有:

  1. onBeforeMount:对应Vue2中的beforeMount钩子,Vue实例挂载之前调用。

  2. onMounted:对应Vue2中的mounted钩子,Vue实例挂载完成后调用。

  3. onBeforeUpdate:对应Vue2中的beforeUpdate钩子,数据更新时调用,但在DOM更新前。

  4. onUpdated:对应Vue2中的updated钩子,数据更新后在DOM更新后调用。

  5. onBeforeUnmount:对应Vue2中的beforeDestroy钩子,Vue实例销毁前调用。

  6. onUnmounted:对应Vue2中的destroyed钩子,Vue实例销毁后调用。

代码展示:

javascript 复制代码
 import {ref,onBeforeMount,onMounted,onBeforeMount,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

export 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

以下是一个简单的例子:

javascript 复制代码
import { onMounted } from 'vue'

export default {
  mounted() {
    console.log('选项式API的mounted生命周期钩子')
  },

  setup() {
    onMounted(() => {
      console.log('组合式API的onMounted生命周期钩子')
    });
  }
}

控制台输出的结果应该是:

'组合式API的onMounted生命周期钩子'

'选项式API的mounted生命周期钩子'

这就完成了检验生命周期钩子执行顺序的验证,首先是组合式API的onMounted,然后是选项式API的mounted。

相关推荐
PandaCave4 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟6 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾27 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧36 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
chusheng18401 小时前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
游走于计算机中摆烂的1 小时前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue