Vue生命周期钩子简介

做者：Nwose Lotanna

翻译：疯狂的技术宅

原文：blog.logrocket.com/introductio…

未经容许，严禁转载

在本文中，咱们来学习可用于 Vue JS 工做流程的全部hooks。

Vue

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

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

在开始以前的准备工做

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

你将须要如下环境：

• 安装 Node.js v10.x 或更高版本。你能够经过在终端中运行如下命令来验证是否须要进行升级：

node -v
复制代码

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

npm uninstall -g vue-cli
复制代码

而后安装新的：

npm install -g @vue/cli
复制代码

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

npm install
复制代码

Vue 实例

Vue 程序由用 new Vue 建立的根 Vue 实例组成，并组织成嵌套的可重用组件树。不管什么时候建立新的 Vue 项目，默认都会经过如下代码在 main.js 文件中激活Vue实例：

new Vue({
 render: h => h(App),
 }).$mount(‘#app’)
复制代码

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

生命周期钩子

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

Vue 有八种生命周期方法：

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

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

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

// src/components/Test.vue
<template>
 <div>
 </div>
</template>
<script>
export default {
 name: ‘Test’,
 props: {
  msg: String
 }
}
</script>
<! — Add “scoped” attribute to limit CSS to this component only →
<style scoped>

h3 {
 margin: 40px 0 0;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>
 
复制代码

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

beforeCreate()

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

<script> export default { name: 'Test', beforeCreate() { alert('beforCreate hook has been called'); console.log('beforCreate hook has been called'); } } </script>
复制代码

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

npm run serve
复制代码

将输出如下界面：

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

created()

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

<script>
export default {
  name: 'Test',
  data() {
    return {
      books: 0
    }
	},
  created() {
    alert('Created hook has been called');
    console.log(`books is of type ${typeof this.books}`);
  }
}
</script>
复制代码

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

beforeMount()

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

<script>
export default {
  beforeMount() {
    alert('beforeMount is called')
  }
}
</script>
复制代码

mounted()

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

<script>
export default {
  mounted() {
    alert('mounted has been called'); 
   }
}
</script>
复制代码

这是使用 Vue CLI 建立的项目的默认位置，由于正如咱们在开头看到的那样，已经在 main.js 文件中完成了安装。这就是你有可能没法使用其余挂钩的缘由，由于默认状况下已经为你安装了实例。

beforeUpdate()

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

<template>
 <div> {{hello}}
 </div>
</template>
<script> export default { name: 'Test', data() { return { books: 0, hello: 'welcome to Vue JS' } }, beforeUpdate(){ alert('beforeUpdate hook has been called'); }, mounted(){ this.$data.hello= 'lalalalallalalalalaalal'; } } </script>
复制代码

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

updated()

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

<template>
 <div> {{hello}}
 </div>
</template>
<script> export default { name: 'Test', data() { return { books: 0, hello: 'welcome to Vue JS' } }, beforeUpdate(){ alert('beforeUpdate hook has been called'); }, updated(){ alert('Updated hook has been called'); }, mounted(){ this.$data.hello= 'lalalalallalalalalaalal'; } } </script>
复制代码

beforeDestroy()

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

<script> export default { name: 'Test', data() { return { books: 0 } }, beforeDestroy() { this.books = null delete this.books } } </script>
复制代码

destroyed()

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

<script> export default { destroyed() { this.$destroy() console.log(this) } } </script>
复制代码

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

结论

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

欢迎关注前端公众号：前端先锋，获取前端工程化实用工具包。