Vue2 和 Vue3 中的开发周期钳子的组织工作形式十分相近，他们依然能出访完全相同的钳子，也期望将它能用作完全相同的情景。
假如工程项目采用 快捷键 API，就无须更动任何人标识符了，即使 Vue3 相容从前的版。
当然，他们用 Vue3 是会用它的女团 API，女团 API中出访那些钳子的形式大同小异，女团API在十分大的Vue工程项目中不光管用。
责任编辑主要就文本：
Vue开发周期钳子有什么样在快捷键API中采用 Vue 生命周期钳子在女团API中采用Vue 3开发周期钳子将 Vue2 的开发周期钳子标识符预览到 Vue3看一看Vue 2和Vue 3中的每一开发周期钳子建立装载预览装载转化成Vue 3中的新增容钳子Vue开发周期钳子有什么样
首先，来看一下 快捷键API 和 女团 API中 Vue 3开发周期钳子的图表。在深入细节之前，这能加深他们的理解。
本质上，每一主要就Vue开发周期事件被分成两个钳子，分别在事件之前和之后调用。Vue应用程序中有4个主要就事件(8个主要就钳子)。
建立 — 在组件建立时执行装载 — DOM 被装载时执行预览 — 当响应数据被修改时执行销毁 — 在元素被销毁之前立即运行在快捷键API中采用 Vue 生命周期钳子
采用 快捷键API，开发周期钳子是被暴露 Vue实例上的快捷键。他们不需要导入任何人东西，只需要调用这个方法并为这个开发周期钳子编写标识符。
例如，假设他们想出访mounted()和updated()开发周期钳子，能这么写：
// 快捷键 API <script> export default { mounted() { console.log(mounted!) }, updated() {console.log(updated!) } }</script>在女团API中采用Vue 3开发周期钳子
在女团API中，他们需要将开发周期钳子导入到工程项目中，才能采用，这有助于保持工程项目的轻量性。
// 女团 API import { onMounted } from vue除了beforecate和created(它被setup方法本身所取代)，他们能在setup方法中出访的API开发周期钳子有9个选项:
onBeforeMount – 在装载开始之前被调用：相关的 render 函数首次被调用。onMounted – 组件装载时调用onBeforeUpdate– 数据预览时调用，发生在虚拟 DOM 打补丁之前。这里适合在预览之前出访现有的 DOM，比如手动移除已添加的事件监听器。onUpdated – 由于数据更动导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钳子。onBeforeUnmount – 在装载组件实例之前调用。在这个阶段，实例依然是完全正常的。onUnmounted– 装载组件实例后调用。调用此钳子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被装载。onActivated – 被 keep-alive 缓存的组件转化成时调用。onDeactivated – 被 keep-alive 缓存的组件停用时调用。onErrorCaptured– 当捕获一个来自子孙组false 以阻止该错误继续向上传播。采用事例：
// 女团 API <script> import { onMounted } from vue export default { setup () { onMounted(() => { console.log(mounted in the composition api!) }) } } </script>将 Vue2 的开发周期钳子标识符预览到 Vue3
这个从Vue2 到Vue3的开发周期映射是直接从Vue 3 Composition API文档中获得的:
beforeCreate -> 采用 setup()created -> 采用 setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestroy -> onBeforeUnmountdestroyed -> onUnmountederrorCaptured -> onErrorCaptured深入了解每一开发周期钳子
他们现在了解了两件重要的事情：
我们能采用的不同的开发周期钳子如何在快捷键API和女团API中采用它他们深入一下每一开发周期钳子，看一看它是如何被采用的，他们能在每一钳子中编写特定标识符，来测试在Options API和Composition API中的各自的区别。
beforeCreate() – 快捷键 API
由于建立的挂钩是用作初始化所有响应数据和事件的事物，因此beforeCreate无法出访组件的任何人响应数据和事件。
以下面的标识符块为例：
// 快捷键 API export default { data() { return { val: hello} }, beforeCreate() { console.log(Value of val is: + this.val) } }val的输出值是 undefined，即使尚未初始化数据，他们也不能在这调用组件方法。
假如你想查看可用文本的完备列表，建议只运行console.log(this)来查看已初始化的文本。当采用快捷键API时，这做法在其他钳子中也很管用。
created() – 快捷键 API
假如他们要在组件建立时出访组件的数据和事件，能把上面的beforeCreate 用 created代替。
// 快捷键API export default { data() { return { val: hello} }, created() { console.log(Value of val is: + this.val) } }其输出为Value of val is: hello，即使他们已经初始化了数据。
在处理读/写反应数据时，采用created 的方法很管用。例如，要进行API调用然后存储该值，则能在此处进行此操作。
最好在这里执行此操作，而不是在mounted 中执行此操作，即使它发生在Vue的同步初始化过程中，并且他们需要执行所有数据读取/写入操作。
那么女团API的建立钳子呢？
对于采用 女团API 的 Vue3 开发周期钳子，采用setup()方法替换beforecate和created。这意味着，在那些方法中放入的任何人标识符现在都只在setup方法中。
// 女团AP import { ref } from vue export default { setup() { const val = ref(hello) console.log(Value of val is: + val.value) return { val} } }beforeMount() and onBeforeMount()
在组件DOM实际渲染安装之前调用。在这一步中，根元素还不存在。在快捷键API中，能采用this.$els来出访。在女团API中，为了做到这一点，必须在根元素上采用ref。
// 快捷键 API export default { beforeMount() { console.log(this.$el) } }女团API中采用 ref:
// 女团 API <template> <div ref=root> Hello World </div> </template> import { ref, onBeforeMount } from vue export default { setup() { const root = ref(null) onBeforeMount(() => { console.log(root.value) }) return{ root } }, beforeMount() {console.log(this.$el) } }即使app.$el还没有建立，所以输出将是undefined。
mounted() and onMounted()
在组件的第一次渲染后调用，该元素现在可用，允许直接DOM出访
同样，在 快捷键API中，他们能采用this.$el来出访他们的DOM，在女团API中，他们需要使用refs来出访Vue开发周期钳子中的DOM。
import { ref, onMounted } from vue export default { setup() { /* 女团 API */ const root = ref(null) onMounted(() => { console.log(root.value) }) return{ root } }, mounted() {/* 快捷键 API */ console.log(this.$el) } }beforeUpdate() and onBeforeUpdate()
数据预览时调用，发生在虚拟 DOM 打补丁之前。这里适合在预览之前出访现有的 DOM，比如手动移除已添加的事件监听器。
beforeUpdate对于跟踪对组件的编辑次数，甚至跟踪建立“撤消”功能的操作很管用。
updated() and onUpdated()
DOM预览后，updated的方法即会调用。
<template> <div> <p>{{val}} | edited {{ count }} times</p> <button @click=val = Math.random(0, 100)>Click to Change</button> </div> </template>快捷键 API 形式：
export default { data() { return { val: 0} }, beforeUpdate() { console.log(“beforeUpdate() val: “ + this.val) }, updated() { console.log(“updated() val: “ + this.val } }女团API的形式：
import { ref, onBeforeUpdate, onUpdated } from vue export default { setup () { const count = ref(0) const val = ref(0) onBeforeUpdate(() => { count.value++; console.log(“beforeUpdate”); }) onUpdated(() => { console.log(“updated() val: “ + val.value) }) return{ count, val } } }那些方法很管用，但是对于更多情景，他们需要采用的watch方法检测那些数据更动。watch 之所以好用，是即使它给出了更动后的数据的旧值和新值。
另一种选择是采用计算属性来基于元素更动状态。
beforeUnmount() 和 onBeforeUnmounted()
在装载组件实例之前调用。在这个阶段，实例依然是完全正常的。
在 快捷键 API中，删除事件侦听器的示例如下所示。
// 快捷键 API export default { mounted() { console.log(mount) window.addEventListener(resize, this.someMethod); }, beforeUnmount() { console.log(unmount) window.removeEventListener(resize, this.someMethod); }, methods: { someMethod() { // do smth } } } //女团APIimport { onMounted, onBeforeUnmount } from vue export default{ setup () { const someMethod =() => { // do smth } onMounted(() => { console.log(mount) window.addEventListener(resize, someMethod); }) onBeforeUnmount(() => { console.log(unmount) window.removeEventListener(resize, someMethod); }) } }实际操作的一种方法是在Vite，vue-cli或任何人支持热重载的开发环境中，预览标识符时，某些组件将自行装载并安装。
unmounted() 和 onUnmounted()
装载组件实例后调用。调用此钳子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被装载。
import { onUnmounted } from vue export default { setup () { /* 女团 API */onUnmounted(() => { console.log(unmounted) }) }, unmounted() { /* 快捷键 API */ console.log(unmounted) } }activated() and onActivated()
被keep-alive 缓存的组件转化成时调用。
例如，假如他们采用keep-alive组件来管理不同的快捷键卡视图，每次在快捷键卡之间切换时，当前快捷键卡将运行这个activated 钳子。
假设他们采用keep-alive包装器进行以下动态组件。
<template> <div> <span @click=tabName = “Tab1”>Tab 1 </span> <span @click=tabName = “Tab2”>Tab 2</span> <keep-alive> <component :is=tabName class=tab-area/> </keep-alive> </div> </template> <script> import Tab1 from ./Tab1.vue import Tab2 from ./Tab2.vue import { ref } from vue export default { components: { Tab1, Tab2 }, setup () {/* 女团 API */ const tabName = ref(Tab1) return{ tabName } } }</script>在Tab1.vue组件内部，他们能像这样出访activated钳子。
<template> <div> <h2>Tab 1</h2> <input type=text placeholder=this content will persist!/> </div> </template> <script> import { onActivated } from vue export default { setup() { onActivated(() => { console.log(Tab 1 Activated) }) } }</script>deactivated() 和 onDeactivated()
被 keep-alive 缓存的组件停用时调用。
这个钳子在一些用例中很管用，比如当一个特定视图失去焦点时保存用户数据和触发动画。
import { onActivated, onDeactivated } from vue export default{ setup() { onActivated(() => { console.log(Tab 1 Activated) }) onDeactivated(() => { console.log(Tab 1 Deactivated) }) } }现在，当他们在快捷键卡之间切换时，每一动态组件的状态都将被缓存和保存。
Vue3 增容钳子
Vue3 为他们提供了两个可用作增容目的的钳子。
onRenderTrackedonRenderTriggered这两个事件都带有一个debugger event，此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
onRenderTracked
跟踪虚拟 DOM 重新渲染时调用。钳子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
<div id=“app”> <button v-on:click=“addToCart”>Add to cart</button> <p>Cart({{ cart }})</p> </div> const app = Vue.createApp({ data() { return { cart: 0} }, renderTracked({ key, target, type }) { console.log({ key, target, type })/* 当组件第一次渲染时，这将被记录下来: { key: “cart”, target: { cart: 0 }, type: “get” } */ }, methods: { addToCart() { this.cart += 1 } } }) app.mount(#app)renderTracked
当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。
用法：
<div id=“app”> <button v-on:click=“addToCart”>Add to cart</button> <p>Cart({{ cart }})</p> </div> const app = Vue.createApp({ data() { return { cart: 0} }, renderTriggered({ key, target, type }) { console.log({ key, target, type }) }, methods: { addToCart() {this.cart += 1 /* 这将导致renderTriggered调用 { key: “cart”, target: { cart: 1 }, type: “set” } */ } } }) app.mount(#app)总结
无论你选择采用快捷键API还是 女团API，不仅要知道要采用哪个开发周期挂钩，而且要知道为什么要采用它，这一点很重要。
对于许多问题，能采用多个开发周期钳子。但是最好知道哪个是最适合你用例的。无论如何，你都应该好好考虑一下，并有充分的理由去选择一个特定的开发周期钳子。
我期望这能帮助大家更多地理解开发周期钳子以及如何在大家的工程项目中实现它。
~完，我是刷碗智，我要去刷碗了，骨的白。
作者：Michael Thiessen 译者：前端小智
原文：https://learnvue.co/2020/12/how-to-use-lifecycle-hooks-in-vue3/
