Vue3版本生命周期详解

介绍

vue3和vue2的生命周期改动不大,下面以图来展现两个版本的周期钩子

 

 

使用示例

配置项写法

vue3可以使用vue2版本的周期配置

准备一个HelloWord组件

 使用App组件嵌套HelloWorld组件,并进行v-if判断是否卸载该组件,以此查看vue3的卸载钩子

 测试:

可以看到当页面刷新后执行了4个周期函数

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')

  },

这是vue3使用vue2版本的周期函数配置,在vue3中其实是建议在setup中进行组合式api的周期函数的配置的

组合式api写法

 

 代码示例

 

 测试:

 还有一个有趣的现象,就是如果书写了配置项的周期函数,又书写了组合式api的钩子,这时的组合式api的钩子函数执行的优先级要高一点下面来进行示例:

查看测试:

 

 可以看到每次都是setup中的函数执行的顺序都要比配置项的要先一步,但是在实际开发中基本不会有这样的写法,这个只是当做测试使用