五.Vue.js实例属性选项-生命周期钩子

Vue创建实例化参数配置中，生命周期钩子有 beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destroyed、actived、deactived、errorCaptured

1. beforeCreate （使用频率低）

实例化创建之前，没有实例化，访问不到数据（不能访问data等属性）

应用场景：页面拦截，权限验证、加个loading事件

2. created （使用频率高）

创建实例化完成，可以访问/修改数据、修改数据不会触发updated beforeUpdate钩子函数（能访问data等属性），不能访问el，要进行dom操作可通过

Vue.nextTick

应用场景：结束loading件、进行ajax请求异步数据的获取、初始化数据

3. beforeMount

dom载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，render函数首次被调用，简单理解为把模板编译成的html，未把vue数据绑定到dom(能访问data)

4. mounted

载入后，把真实的dom挂载到页面（能访问data等属性），渲染html，不保证渲染所有子类，可通过Vue.nextTick等到整个视图都渲染完毕

应用场景：挂载元素dom节点的获取、dom操作（document.getElementById("name")）、插件使用、后端请求，拿回数据

5. beforeUpdate (不要在update beforeUpdate修改不定数据，否则会引起死循环)

数据更新之前调用（view层的数据变化前，不是data中的数据改变前），发生在虚拟DOM重新渲染，简单理解为界面需要绑定数据，更改数据时才会触发，若界面没绑定，只是数据变化不会触发

应用场景：组件更新前

6.updated

数据更新完成，dom也从新render完成。简单理解为界面需要绑定数据，更改数据时才会触发，若界面没绑定，只是数据变化不会触发

应用场景：统一的业务逻辑处理

7. beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用

应用场景：清除计时器、清除非指令绑定的事件、你确认删除XX吗？

8. destroyed

实例销毁后调用。在这一步，Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁

应用场景：当前组件已被删除，清空相关内容

9. actived（使用频率较低）

被 keep-alive 缓存的组件激活时调用，在生命周期created、mounted后执行

10. deactived

停用被 keep-alive 缓存的组件激活时调用，与actived用法一样