其他分享
首页 > 其他分享> > vue3文档速览之生命周期

vue3文档速览之生命周期

作者:互联网

https://v3.cn.vuejs.org/
官网yyds

首先作为一个半吊子vue2的开发者,让我对vue3产生兴趣的理由无非就是,‘打包迅速’,‘编译快’,‘开发效率直线提升2倍’等等的宣传。这期我们来看一下生命周期方向vue3 对于 vue2 有什么改变。

生命周期

首先来看一下两个生命周期的对比

在这里插入图片描述

vue2历史的八大生命周期还历历在目:

beforeCreate: 组件实例刚被创建, 组件属性计算之前, 如data属性等

created: 组件实例创建完成, 属性已绑定, 但DOM还未生成, *$el* 属性还不存在

beforeMount: 模版编译/挂载之前

mounted: 模版编译/挂载之后(*不保证组件已在document中*)

beforeUpdate: 组件更新之前

updated: 组件更新之后

beforeDestory: 组件销毁前调用

destory: 组件销毁后调用

而落实到vue3中,最后两个beforeDestory和destory已经在版本的更迭中被取代了。

取而代之是新的生命周期与钩子函数:
在这里插入图片描述
因为setup是围绕beforeCreate 和 created 生命周期钩子运行的,所以不需要显式地定义它们。
换句话说,在这些钩子种编写的任何代码都应该直接在setup函数中编写。

// MyBook.vue

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

标签:生命周期,setup,速览,文档,vue2,vue3,组件,mounted
来源: https://blog.csdn.net/qq_43277404/article/details/121790608