面试——Vue生命周期

话很少说直接上图，这是一张高清图，全部的精髓都在里面

如下是我的理解

beforeCreate

1. 建立一个Vue实例，此时实例上只有一些生命周期函数和默认的事件
2. 此时data computed watch methods上的方法和数据均不能访问

created

1. 能够对data数据进行操做，可进行一些请求，请求不易过多，避免白屏时间太长。

beforeMount

1. 判断el的挂载方式
2. 判断是否有template设置
3. 将template进行渲染保存到内存当中，还未挂载在页面上

mounted

1. 将内存中的模版挂载到页面上
2. 此时能够操做页面上的DOM节点
3. 此时组件从建立阶段进入运行阶段

beforeUpdate

1. 页面显示的数据是旧的，此时data里面的数据是最新，页面数据和data数据暂未同步

updated

1. 根据data里的最新数据渲染出最新的DOM树，而后将最新的DOM挂载到页面
2. 此时data和页面数据一致，都是最新的

beforeDestroy

1. 此时组件从运行阶段进入到销毁阶段
2. 组件上的data和methods以及过滤器等都出于可用状态，销毁还未执行

destroyed

1. 组件已经被彻底销毁，组件中全部的数据、方法、指令、过滤器等，都已不可用

其余钩子

---

通常在用到keep-alive组件时会用到该activated和deactivated钩子

activated

在加载对应模块时会被调用，页面第一次加载时也会被调用

deactivated

组件切换出去时被调用

errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子能够返回 false 以阻止该错误继续向上传播。

自定义指令提供的钩子函数

---

bind

只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置

inserted

被绑定元素插入父节点时调用 (仅保证父节点存在，但不必定已被插入文档中)

update

所在组件的 VNode 更新时调用，可是可能发生在其子 VNode 更新以前

componentUpdated

指令所在组件的 VNode 及其子 VNode 所有更新后调用

unbind

只调用一次，指令与元素解绑时调用

机会只会留给有准备的人，加油！！！