生命周期钩子

生命周期: 每个 Vue 实例都经过一系列初始化步骤。从创建时设置数据到编译模板，将实例装载到DOM，最后在数据更改期间更新 DOM。这个过程被称为 Vue 实例的生命周期，

生命周期钩子函数（简称生命周期函数），指的是组件的创建、更新、销毁三个阶段所触发执行的函数。 根据每个阶段触发的钩子函数，我们可以相应的做一些操作，如获取后端接口数据、监听事件、执行事件、执行定时器、移除事件、清理定时器等等。

Vue 有八种生命周期方法：

beforeCreate 在实例初始化之后 数据观测（data observer）和 watch配置之前被调用

created 实例创建完成后调用 在这一步 已经完成数据观测， 属性和方法的运算， watch事件的回调， 但是现阶段还没有挂载

beforeMount 在挂载开始之前被调用 ，创建 虚拟DOM

mounted 把虚拟DOM 挂载到真实的DOM上， 在Vue中获取DOM元素对象 ，项目AJAX请求 ，一般都会在这里 ，或者created中发送

beforeUpdate 当数据发生变化时 会触发这个函数

updated 数据更改导致虚拟DOM重新渲染和打补丁， 在这之后会调用updated

beforeDestory 在实例被销毁之前调用， 若页面中有定时器 会在这个钩子函数中清除

destroyed 实例销毁之后调用 ，实例中的属性再也不是响应的 watch被移除

//运行此代码
new Vue({
  el:"app",
})
//或者是这个代码
new Vue({
 render: h => h(App),
 }).$mount(‘#app’)

等同于运行一下这个代码

new Vue({
  el: "#app",
  beforeCreate: function() {
    console.log("调用了beforeCreate");
  },
  created: function() {
    console.log("调用了created");
  },
  beforeMount: function() {
    console.log("调用了beforeMount");
  },
  mounted: function() {
    console.log("调用了mounted");
  }
});
// 输出结果
// 调用了beforeCreate
// 调用了created
// 调用了beforeMount
// 调用了mounted

beforeCreate

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

此时正处在 beforeCreate 阶段，尚未设置计算属性、观察者、事件、数据属性和操作等内容。

created

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

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

beforeMount

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

mounted

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

beforeUpdate

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

updated

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

beforeDestory

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

destroyed

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