Vue生命周期钩子简介[每日前端夜话0x8A]

作者：Nwose Lotanna

翻译：疯狂的技术宅

来源：logrocket

在本文中，我们来学习可用于 Vue JS 工作流程中的所有hooks。

Vue

Vue JS 是一个非常先进的 JavaScript 框架，由尤雨溪和 Vue 核心团队创建，超过 230 个开源社区爱好者贡献了代码。 Vue 的用户超过 870,000 人，并且已经 在 GitHub 上得到了140,000 个star ?。它由一个仅关注视图层的核心库和对其提供支持的生态系统组成，可帮助你解决大型单页应用程序的复杂性问题。

在本文中，你将了解 Vue 实例从创建到销毁的整个生命周期。

在开始之前的准备工作

本文适用于所有使用 Vue JS 的开发人员，包括初学者。在阅读本文之前，你应该具备一些前提条件。

你将需要以下环境：

• 安装 Node.js v10.x 或更高版本。你可以通过在终端中运行以下命令来验证是否需要进行升级：

1 node -v

• 安装 node package manager 6.7 或更高版本（NPM）
• 强烈建议使用代码编辑器：Visual Studio Code
• 把 Vue 的最新版本全局安装在你的计算机上
• 在你的计算机上安装 Vue CLI 3.0。安装前请先卸载旧的CLI版本：

1 npm uninstall -g vue-cli

然后安装新的：

1 npm install -g @vue/cli

• 下载 Vue Mixins 入门项目，在这里
• 解压缩下载的项目
• 切换到解压缩的文件目录并运行命令以使所有依赖项保持最新：

1 npm install

Vue 实例

Vue 程序由用 new Vue 创建的根 Vue 实例组成，并组织成嵌套的可重用组件树。无论何时创建新的 Vue 项目，默认都会通过以下代码在 main.js 文件中激活Vue实例：

1 new Vue({
2 render: h => h(App),
3 }).$mount(‘#app’)

这段代码表示包含应用程序组件的 Vue 实例，此语法与单文件应用等变体略有不同。

生命周期钩子

每个 Vue 实例都经过一系列初始化步骤。从创建时设置数据到编译模板，将实例装载到DOM，最后在数据更改期间更新 DOM。这个过程被称为 Vue 实例的生命周期，在默认情况下，当它们经历创建和更新 DOM 的过程中，会在其中运行一些函数，在这些函数内部创建并声明 Vue 组件，这些函数称为生命周期钩子。

来自Vue文档的生命周期图

Vue 有八种生命周期方法：

1. Before create
2. Created
3. Before mount
4. Mounted
5. Before update
6. Updated
7. Before destroy
8. Destroyed

在本文中，你将了解所有的这些钩子，并学习其每个阶段的案例。

本文将使用测试组件，它位于 src 文件夹内的 components 文件夹中。它应该看起来像这样：

 1 // src/components/Test.vue
 2 <template>
 3 <div>
 4 </div>
 5 </template>
 6 <script>
 7 export default {
 8 name: ‘Test’,
 9 props: {
10  msg: String
11 }
12 }
13 </script>
14 <! — Add “scoped” attribute to limit CSS to this component only →
15 <style scoped>
16
17 h3 {
18 margin: 40px 0 0;
19 }
20 ul {
21 list-style-type: none;
22 padding: 0;
23 }
24 li {
25 display: inline-block;
26 margin: 0 10px;
27 }
28 a {
29 color: #42b983;
30 }
31 </style>

在本教程中，脚本部分将单独用于各种钩子案例。

beforeCreate()

这是在 Vue.js 中调用的第一个生命周期钩子，它在 Vue 实例初始化后立即被调用。

1 <script>
2 export default {
3  name: 'Test',
4  beforeCreate() {
5    alert('beforCreate hook has been called');
6    console.log('beforCreate hook has been called');
7  }
8 }
9 </script>

你可以在开发环境中运行程序来检查界面。

1 npm run serve

将输出以下界面：

注意，在加载组件之前，首先执行的是在生命周期钩子中写入的 alert 语句。这正是函数在 Vue 引擎创建应用程序组件之前调用的表现。此时正处在 beforeCreate 阶段，尚未设置计算属性、观察者、事件、数据属性和操作等内容。

created()

正如你所猜测的那样，这是在 beforeCreated 钩子之后立即调用的第二个生命周期钩子。在这个阶段，Vue 实例已经初始化，并且已经激活了计算属性、观察者、事件、数据属性和随之而来的操作。

 1 <script>
 2 export default {
 3  name: 'Test',
 4  data() {
 5    return {
 6      books: 0
 7    }
 8    },
 9  created() {
10    alert('Created hook has been called');
11    console.log(`books is of type ${typeof this.books}`);
12  }
13 }
14 </script>

如果你运行该程序，你将会发现现在可以显示数据类型。着在 beforeCreated 阶段是不可能的，因为这时发生的激活还没有发生。但是 Vue 实例在此阶段尚未安装，因此你无法在此处操作 DOM，元素属性尚不可用。

beforeMount()

这是在 DOM 上挂载实例之前的那一刻，模板和作用域样式都在这里编译，但是你仍然无法操作DOM、元素属性仍然不可用。

1 <script>
2 export default {
3  beforeMount() {
4    alert('beforeMount is called')
5  }
6 }
7 </script>

mounted()

这是在 beforeMounted 之后调用的下一个生命周期钩子。在安装实例后会立即调用它。现在 app 组件或项目中的其他组件都可以使用了。现在可以进行数据适合模板、DOM元素替换为数据填充元素之类的操作了，元素属性现在也可以使用了。

1 <script>
2 export default {
3  mounted() {
4    alert('mounted has been called'); 
5   }
6 }
7 </script>

这是使用 Vue CLI 创建的项目的默认位置，因为正如我们在开头看到的那样，已经在 main.js 文件中完成了安装。这就是你有可能无法使用其他挂钩的原因，因为默认情况下已经为你安装了实例。

beforeUpdate()

在这里对需要更新 DOM 的数据进行更改。在进行删除事件侦听器之类的更改之前，此阶段适合任何逻辑。

 1 <template>
 2 <div> {{hello}}
 3 </div>
 4 </template>
 5 <script>
 6 export default {
 7  name: 'Test',
 8  data() {
 9   return {
10    books: 0,
11    hello: 'welcome to Vue JS'
12   }
13 },
14 beforeUpdate(){
15 alert('beforeUpdate hook has been called');
16 },
17 mounted(){
18 this.$data.hello= 'lalalalallalalalalaalal';
19 }
20 }
21 </script>

最初在 DOM 上有一个欢迎注释，但是在挂载阶段（可以操作DOM的地方），数据会发生变化，因此beforeUpdate 的 alert 会在更改之前出现。

updated()

在对 DOM 更新之后立即调用此生命周期钩子，它在调用 beforeUpdate 挂钩之后执行。可以在此处执行与 DOM 相关的操作，但不建议更改此钩子内的状态，因为 Vue 已经专门为此提供了平台。

 1 <template>
 2 <div> {{hello}}
 3 </div>
 4 </template>
 5 <script>
 6 export default {
 7  name: 'Test',
 8  data() {
 9   return {
10    books: 0,
11    hello: 'welcome to Vue JS'
12   }
13  },
14 beforeUpdate(){
15 alert('beforeUpdate hook has been called');
16 },
17 updated(){
18 alert('Updated hook has been called');
19 },
20 mounted(){
21 this.$data.hello= 'lalalalallalalalalaalal';
22 }
23}
24 </script>

beforeDestroy()

调用此 Vue 生命周期钩子的时机是在 Vue 实例被销毁之前，实例和所有函数仍然完好无损并在此处工作。在这个阶段你可以执行资源管理、删除变量和清理组件。

 1 <script>
 2 export default {
 3 name: 'Test',
 4 data() {
 5    return {
 6      books: 0
 7    }
 8  },
 9  beforeDestroy() {
10    this.books = null
11    delete this.books
12  }
13 }
14 </script>

destroyed()

这是 Vue 生命周期的最后阶段，其中所有的子 Vue 实例都已被销毁，事件监听器和所有指令之类的东西在此阶段已被解除绑定。在对象上运行 destroy 之后调用它。

1 <script>
2 export default {
3  destroyed() {
4    this.$destroy() 
5    console.log(this)
6  }
7 }
8 </script>

当你运行程序并查看控制台时，将看不到任何内容。

结论

你已经了解了 Vue JS 中的八个生命周期钩子以及在何时怎样使用它们。现在，你可以使用生命周期钩子在 Vue 实例生命周期的不同阶段添加我们的自定义逻辑，从而控制从创建到销毁的流程。这将加深你对 Vue JS 中常用功能背后的原理的理解。

原文：https://blog.logrocket.com/introduction-to-vue-lifecycle-hooks/