vue 生命周期

vue 生命周期：

vue 官网生命周期图片

生命周期就是组件实例出来到销毁的一系列过程。分为挂载阶段、更新阶段、销毁阶段。

一、挂载阶段

– 主要是组件的实例化,模板解析 然后 render 生成 vnode 节点(这时候已经实现响应式了),最后挂载到页面 el 上，第一次渲染完成

（1）new Vue()：初始化一个 vue 实例；

（2）beforeCreate：开启了生命周期钩子函数，初始化事件；

（3）created：可以在此进行数据的请求，但是这一阶段的 dom 没有渲染；同时，此阶段对数据进行了观测，有了 data 属性，初始化 data 数据(实现响应式)；

（4）beforeMount：

① 先判断有木有el选项,如果有的话，就直接向下去执行；如果没有的话，则 vue 实例会处于一种“未挂载”的状态，此时通过 vm.$mount 来手动执行挂载；

② 有el继续向下执行：

如果vue实例中有template的话，则将其作为模板编译 render 函数；

如果没有template模板的话，则将外部的 html 作为模板进行编译；

如果既有template也有outer HTML，那么template的优先级会高于outer HTML;

如果vue实例中还有一个render函数的话，他是以 createElement 作为的参数，然后做渲染操作的，我们可以直接嵌入 JSX；

render 函数 > template 模板 > outer Html

new Vue({
  el:"#app",
  render: function (createElement) {
    return createElement(App)
  }
})

（4）mounted：给 vue 实例对象添加$el成员，并且需要替换掉挂载在dom元素，在beforeMount中的打印的el还是undefined；

在 mounted 之前还是通过变量进行的占位，eg: <div>{{msg}}</div>,mounted 之后，可以看到msg是有赋值的；

二、更新阶段

– 主要是 data 变化触发响应式 setter 方法，重新 render 生成 vnode 节点,通过 diff 算法对比新旧 vnode 节点，进行 patch 打补丁，更新渲染完成

（5）beforeUpdate：dom 没有渲染，可修改数据不会进行二次渲染；

（6）updated：已经渲染生成了 dom 节点，通过 diff 算法对比新旧 dom，对变化的地方进行更新，也就是进行 patch 打补丁[patch(vnode,newVNode)]

三、卸载(销毁)阶段

– 主要是卸载所有的 watchers，子组件以及事件（执行清理工作的阶段）

（7）beforeDestroy：此阶段是销毁工作前；

（8）destroyed：通过 this.\$destroy()进行销毁，会主动的清理自己的内容（比如：响应式的数据，@click 绑定事件，清理开启的定时器，移除手动创建的 dom 对象等）

（9）activited 和 deactivated：

注意：只有当组件在被进行包裹的时候才会有 activited 和 deactivited

<keep-alive>包裹两个组件：
组件 A 和组件 B。

当第一次切换到组件 A 时，组件 A 的 created 和 activated 生命周期函数都会被执行，这时通过点击事件改变组件 A 的文字的颜色，再切换到组件 B，这时组件 A 的 deactivated 的生命周期函数会被触发；

在切换回组件 A，组件 A 的 activated 生命周期函数会被触发，但是它的 created 生命周期函数不会被触发了，而且 A 组件的文字颜色也是我们之前设置过的。

（10）errorCaptured：当捕获一个来自子孙组件的错误时被调用