标签：生命周期 setup 速览 文档 vue2 vue3 组件 mounted

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。