五.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用法一样

你可能感兴趣的:(vue2.0,vue生命钩子,生命周期,created,mounted)