vue3.0的生命周期

Vue2.0版本与Vue3.0生命周期钩子函数变化：

Vue2选项式API	Vue3选项式API	Vue3组合式API
beforeCreate	beforeCreate	setup()
created	created	setup()
beforeMount	beforeMount	onBeforeMount
mounted	mounted	onMounted
beforeUpdate	beforeUpdate	onBeforeUpdate
updated	updated	onUpdated
beforeDestory	beforeUnmount	onBeforeUnmount
destoryed	unmounted	onUnmounted

Vue3组合式API：因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

注册生命周期钩子函数

举个例子，mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码。

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 mounted，updated 和 unmounted。

所有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。

注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例。

钩子函数

钩子是一种事件劫持机制，也就是说它会比你的事件更早进行执行处理。你可以简单地把它理解为vue的内置事件，但是这个内置事件是由你去配置的。

选项式API 的各个阶段生命周期钩子函数：

钩子函数	描述
beforeCreate	在初始化实例时调用。在处理其他选项（如data（）或computed）之前，在props解析之后，初始化实例时立即调用。
created	在实例处理完所有与状态相关的选项后调用。当调用这个钩子时，实例已完成以下的配置：响应数据、计算属性、methods和watchers。然而，挂载阶段还没开始，$el 属性目前不可用。
beforeMount	在挂载开始之前被调用。调用此钩子时，组件已完成设置其响应状态，但尚未创建DOM节点。它即将第一次执行DOM渲染。(在服务器端渲染期间不会调用此钩子。)
mounted	组件装载后被调用。el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。(所有子组件已装载，该组件DOM树已创建并插入到父容器中)，在这个钩子通常用于执行访问DOM的操作，或者获取服务器数据并设置给data的操作。(在服务器端渲染期间不会调用此钩子。)
beforeUpdate	由于组件状态修改触发更新，会在组件虚拟 DOM 重新渲染之前调用。在Vue更新DOM之前，可以使用此钩子访问DOM状态。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。(在服务器端渲染期间不会调用此钩子。)
updated	在组件由于状态更改而更新其DOM 重新渲染并更新真实DOM后调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。(在服务器端渲染期间不会调用此钩子。)
beforeUnmount	在卸载组件实例之前调用。当调用这个钩子时，实例仍然完全可用。(在服务器端渲染期间不会调用此钩子。)
unmounted	卸载组件后调用。调用后，组件所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被卸载。使用此钩子可以清除手动创建的副作用，例如计时器、DOM事件监听或服务器连接。(在服务器端渲染期间不会调用此钩子。)

create 和 mounted

钩子函数	描述
beforecreated	el 和 data 并未初始化
created	完成了data 数据的初始化，el没有
beforeMount	完成了 el 和 data 初始化
mounted	完成挂载

update

我们单击页面中的“更新数据”按钮，将数据更新。下面就能看到data里的值被修改后，将会触发update的操作。

注意beforeUpdate是指view层的数据变化前，不是data中的数据改变前触发。因为Vue是数据驱动的。注意观察弹窗就容易发现。

unmounted

Vue实例卸载完成后，原先实例生成的DOM元素也随之卸载。

生命名周期钩子函数用法

函数	描述
beforecreate	如可以在这加个loading事件
created	在这结束loading，还做一些初始化，实现函数自执行
mounted	在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeMount	你确认删除XX吗？
mounted	当前组件已被删除，清除例如计时器、DOM事件监听或服务器连接。