在vue中，生命周期钩子函数指的是当生命周期经历创建和更新DOM的过程中，会在其中运行的一些函数；在这些函数内部可以创建和声明vue组件。
本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。
什么是vue的生命周期钩子函数
每个 Vue 实例都经过一系列初始化步骤。从创建时设置数据到编译模板，将实例装载到DOM，最后在数据更改期间更新 DOM。这个过程被称为 Vue 实例的生命周期，在默认情况下，当它们经历创建和更新 DOM 的过程中，会在其中运行一些函数，在这些函数内部创建并声明 Vue 组件，这些函数称为生命周期钩子。
Vue 有八种生命周期方法：
-
Before create
立即学习“前端免费学习笔记（深入）”；
Created
Before mount
Mounted
Before update
Updated
Before destroy
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教程》】
