Vue的生命周期

vue对象核心的四个阶段八个钩子函数：

1）、数据挂载 阶段 ：把传入的data属性的内容，赋给vue对象。即：把形参中data的属性赋给vue对象。

​ 前后分别的钩子函数是：beforeCreate、created

2）、模板渲染阶段：把vue对象中data渲染到dom对象上。

​ 前后分别的钩子函数是：beforeMount、mounted

3）、组件更新阶段：当数据发生变化时，会触发组件的更新。

​ 前后分别的钩子函数是：beforeUpdate、updated

4）、组件销毁阶段：

​ 前后分别的钩子函数是：beforeDestroy、destroyed
beforeCreate函数：

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

即此时vue（组件）对象被创建了，但是vue对象的属性还没有绑定，如data属性，computed属性还没有绑定，即没有值。

此时还没有数据和真实DOM。

即：属性还没有赋值，也没有动态创建template属性对应的HTML元素；
Created函数-

vue对象的属性有值了，但是DOM还没有生成，$el属性还不存在。

此时有数据了，但是还没有真实的DOM

​ 即：data，computed都执行了。属性已经赋值，但没有动态创建template属性对应的HTML元素，所以，此时如果更改数据不会触发updated函数

​ 如果：数据的初始值就来自于后端，可以发送ajax，或者fetch请求获取数据，但是，此时不会触发updated函数；

beforeMount函数：

模板编译(template)、数据挂载(把数据显示在模板里)之前执行的钩子函数

此时 this.$el有值，但是数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换

模板编译：用vue对象的数据（属性）替换模板中的内容

Mounted函数：

模板编译完成，数据挂载完毕

即：此时已经把数据挂载到了页面上，所以，页面上能够看到正确的数据了。

一般来说，我们在此处发送异步请求（ajax，fetch，axios等），获取服务器上的数据，显示在DOM里。

beforeUpdate函数：

组件更新之前执行的函数，只有数据更新后，才能调用（触发）beforeUpdate，注意：此数据一定是在模板上出现的数据，否则，不会，也没有必要触发组件更新（因为数据不出现在模板里，就没有必要再次渲染）

数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前；
updated函数

组件更新之后执行的函数

vue（组件）对象对应的dom中的内部（innerHTML）改变了，所以，叫作组件更新之后；

beforeDestroy：vue（组件）对象销毁之前；

destroyed：vue组件销毁后；

补充：

activated函数：keep-alive组件激活时调用；

deactivated函数：keep-alive组件停用时调用；