介绍
Lifecycle hooks 是您正在使用的库如何在幕后工作的窗口. Lifecycle hooks 允许您知道您的组件何时被创建、添加到 DOM、更新或破坏。
本文将介绍您如何在 Vue.js 中创建、安装、更新和破坏链条。
前提条件
要通过这个教程,你需要:
熟悉 Vue.js. 阅读如何使用 Vue.js 开发网站(https://www.digitalocean.com/community/tutorial_series/how-to-develop-websites-with-vue-js)系列以了解更多
理解创建胡克(初始化)
Creation hooks 是您组件中运行的第一个hooks. 它们允许您在您的组件甚至被添加到 DOM 之前执行操作. 与其他任何一个hooks 不同,Creation hooks 也在服务器端渲染过程中运行。
如果您需要在客户端渲染和服务器渲染过程中在组件中设置东西,请使用创建链接。
您将无法访问 DOM 或目标安装元素(‘this.$el’)在创建夹中。
「創作前」
在您的组件初始化时运行BeforeCreate链接 - 数据尚未反应,并且事件尚未设置:
1[label ExampleComponent.vue]
2<script>
3export default {
4 beforeCreate() {
5 console.log('At this point, events and lifecycle have been initialized.')
6 }
7}
8</script>
在本示例中,当运行beforeCreate链接时,此片段将记录消息:
1[secondary_label Output]
2At this point, events and lifecycle have been initialized.
创造
在模板和虚拟 DOM 安装或渲染之前,创建链接运行 - 您可以访问活跃的反应性数据和事件:
1[label ExampleComponent.vue]
2<template>
3 <div ref="example-element">{{ propertyComputed }}</div>
4</template>
5
6<script>
7export default {
8 data() {
9 return {
10 property: 'Example property.'
11 }
12 },
13
14 computed: {
15 propertyComputed() {
16 return this.property
17 }
18 },
19
20 created() {
21 console.log('At this point, this.property is now reactive and propertyComputed will update.')
22 this.property = 'Example property updated.'
23 }
24}
25</script>
在本示例中,片段将属性存储为示例属性。当运行创建链接时,它会登录一个消息:
1[secondary_label Output]
2At this point, this.property is now reactive and propertyComputed will update.
然后将属性更改为示例属性更新。
在生命周期后期,计算属性将显示为更新示例属性而不是示例属性。
在此步骤中,您已经审查了一些创建的示例,并准备进入生命周期的下一部分,安装。
了解山顶(DOM插入)
Mounting hooks 通常是最常用的hooks. 它们允许您在第一次渲染之前和之后立即访问您的组件. 然而,它们在服务器侧渲染过程中不会运行。
如果您需要在最初渲染之前或之后立即访问或更改组件的 DOM,请使用安装钩子。
如果您需要在初始化时为您的组件提取一些数据,请勿使用安装钩子。
<$>[注]
注: 使用创建(或创建和激活为保持活着的组件)代替此。
《前山》
beforeMount链接在初始渲染发生前立即运行,并在编译了模板或渲染函数后:
1[label ExampleComponent.vue]
2<script>
3export default {
4 beforeMount() {
5 console.log(`At this point, vm.$el has not been created yet.`)
6 }
7}
8</script>
在本示例中,当运行beforeMount链接时,此片段将记录消息:
1[secondary_label Output]
2At this point, vm.$el has not been created yet.
山
在安装链接中,您将可以完全访问反应组件、模板和渲染 DOM(通过this.$el)。
使用安装来修改 DOM,特别是当集成非Vue 库时:
1[label ExampleComponent.vue]
2<template>
3 <div ref="example-element">Example component.</div>
4</template>
5
6<script>
7export default {
8 mounted() {
9 console.log(`At this point, vm.$el has been created and el has been replaced.`);
10 console.log(this.$el.textContent) // Example component.
11 }
12}
13</script>
在本示例中,当运行安装链接时,此片段将记录消息:
1[secondary_label Output]
2At this point, vm.$el has been created and el has been replaced.
此外,将记录一个例子内容(‘this.$el.textContent’)的消息。
在本节中,您探讨了安装的用例. 在下一步,您将审查一些使用更新的示例。
了解更新胡克(差别和重新渲染)
Updating hooks 被称为当您的组件使用的反应性属性发生变化或其他原因导致它重新渲染时,它们允许您连接到您的组件的 watch-compute-render 周期。
如果您需要知道您的组件何时重新渲染,请使用更新夹,特别是用于调试或配置文件。
如果您需要知道组件上的反应性属性何时发生变化,请不要使用更新链接,而是使用 计算属性或 观察者来进行此操作。
《前期》
在您组件上的数据更改和更新周期开始后,在 DOM 被补丁和重新渲染之前,beforeUpdate链接运行。
使用beforeUpdate,如果您需要在返回元件之前获取元件上的任何反应数据的新状态:
1[label ExampleComponent.vue]
2<template>
3 <div ref="example-element">{{counter}}</div>
4</template>
5
6<script>
7export default {
8 data() {
9 return {
10 counter: 0
11 }
12 },
13
14 created() {
15 setInterval(() => {
16 this.counter++
17 }, 1000)
18 },
19
20 beforeUpdate() {
21 console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
22 // Logs the counter value every second, before the DOM updates.
23 console.log(this.counter)
24 }
25}
26</script>
首先,此片段将计数存储为0。当创建链接运行时,它将每1000秒增加计数。
1[secondary_label Output]
2At this point, Virtual DOM has not re-rendered or patched yet.
还有一个计数的号码也被登录了。
更新
更新链接在您的组件和 DOM 重现器上的数据更改后运行。
使用更新,如果您需要在更改属性后访问 DOM:
1[label ExampleComponent.vue]
2<template>
3 <div ref="example-element">{{counter}}</div>
4</template>
5
6<script>
7export default {
8 data() {
9 return {
10 counter: 0
11 }
12 },
13
14 created() {
15 setInterval(() => {
16 this.counter++
17 }, 1000)
18 },
19
20 updated() {
21 console.log(`At this point, Virtual DOM has re-rendered and patched.`)
22 // Fired every second, should always be true
23 console.log(+this.$refs['example-element'].textContent === this.counter)
24 }
25}
26</script>
首先,此片段将计数存储为0。当创建链接运行时,它将每1000秒增加计数。
1[secondary_label Output]
2At this point, Virtual DOM has re-rendered and patched.
一个 Boolean 值的 true 会被记录,因为渲染值和当前值等同。
现在你已经探索了更新钩子的使用,你已经准备好了解破坏钩。
理解破坏胡克(Teardown)
Destruction hooks 允许您在您的组件被破坏时执行操作,例如清理或分析发送。
破坏前
beforeDestroy在下落之前立即发射,您的组件仍将完全存在和功能。
如果您需要清理事件或反应性订阅,请使用beforeDestroy:
1[label ExampleComponent.vue]
2<script>
3export default {
4 data() {
5 return {
6 exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
7 }
8 },
9
10 beforeDestroy() {
11 console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
12 // Perform the teardown procedure for exampleLeakyProperty.
13 // (In this case, effectively nothing)
14 this.exampleLeakyProperty = null
15 delete this.exampleLeakyProperty
16 }
17}
18</script>
此片段将首先存储exampleLeakyProperty。当运行beforeDestroy链接时,此片段将记录消息:
1[secondary_label Output]
2At this point, watchers, child components, and event listeners have not been torn down yet.
然后exampleLeakyProperty被删除。
被摧毁
当你到达被摧毁的钩子时,你的组件几乎没有剩下任何东西。
如果您需要进行最后一分钟的清理或通知远程服务器该组件被破坏,请使用破坏:
1[label ExampleComponent.vue]
2<script>
3import ExampleAnalyticsService from './example-analytics-service'
4
5export default {
6 destroyed() {
7 console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
8 console.log(this)
9 ExampleAnalyticsService.informService('Component destroyed.')
10 }
11}
12</script>
首先,此片段将导入ExampleAnalyticsService。当运行beforeDestroy链接时,此片段将登录消息:
1[secondary_label Output]
2At this point, watchers, child components, and event listeners have been torn down.
该组件的剩余内容将登录到控制台,并在ExampleAnalyticsService中发送Component destroyed消息。
有了这一点,您已经完成了Vue.js生命周期的总体审查。
其他Hooks
还有另外两个链接,激活和禁用。这些是保持活着的组件,这是本文范围之外的一个主题。
足以说,它们允许您检测当一个包含在保持活着标签中的组件被关闭或关闭时,您可以使用它们来检索您的组件的数据或处理状态变更,有效地表现为创建和之前摧毁,而无需进行完整的组件重建。
结论
在本文中,您介绍了 Vue.js 实例生命周期中可用的不同生命周期夹克,您探索了创建夹克、安装夹克、更新夹克和破坏夹克的不同用例。
如果您想了解有关 Vue.js 的更多信息,请参阅 我们的 Vue.js 主题页面以获取练习和编程项目。