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