Vue实例的生命周期钩子函数
- Vue的生命周期钩子函数有11个,不过我们经常用到就几个而已
- beforeCreate这是第一个生命周期函数,表示实例初始化之后,完全创建出来之前,它刚初始化一个Vue空的实例对象,这个时候对象身上只有一些默认的事件和生命周期函数,data和methods中数据都还不能被访问到
- created在实例创建完成之后被立即调用,这时候data和methods中的数据都已经可以被访问和参与运算,不过挂载阶段还没开始,$el属性还不可见
- beforeMount这时候第三个生命周期函数,在挂载之前被调用,表示模板已经在内存中生成了,不过还没把模板渲染到页面当中去
- Mounted 表示内存中的模版已经真实被挂载在页面中,用户已经可以看到渲染好的页面了,只要执行完了mounted就表示整个Vue实例已经初始化完毕此时组件已经脱离了创建阶段进入了运行阶段,
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:
mounted: function () { this.$nextTick(function () { // ... }) }
这里稍微说下vm.$nextTick 这个方法是2.1.0起新增的,如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 兼容,所以如果你的目标浏览器不是原生支持 Promise ,你得自行 兼容。主要作用是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。
5. beforeUpdate在数据更新的时候调用该函数,这里适合在更新之前访问现有的DOM元素,执行该函数的话页面中的数据还是很旧的,页面尚未和最新的数据保持同步
6. updated由于数据的更改导致DOM元素重新进行渲染,在这之后会调用该函数,当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作。
7. beforeDestroy当执行这个函数的时候实例就已经从运行阶段,进入到销毁阶段了此时,数据还是处于可用状态,并没有真正执行销毁过程
8. destroyed 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
9. activated keep-alive 组件激活时调用。
10.deactivated keep-alive 组件停用时调用。
11. errorCaptured2.5.0+ 新增,当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
- Vue实例的生命周期和钩子函数
- Vue实例生命周期及钩子函数
- 关于Vue实例的生命周期各状态函数(钩子)说明
- vue自定义指令实例--钩子函数及钩子函数参数
- Vue | 生命周期与生命周期钩子函数
- vue的生命周期钩子函数
- vue生命周期的钩子函数学习总结
- vue2.0项目实战(4)生命周期和钩子函数详解
- vue生命周期中,钩子函数执行顺序
- vue 生命周期钩子函数
- vue的生命周期及钩子函数
- vue生命周期中,钩子函数执行顺序
- vue生命周期与钩子函数简单示例
- 详解Vue 实例中的生命周期钩子
- Vue生命周期与钩子函数
- vue-router钩子beforeRouteEnter函数获取到this实例
- vue实例--创建函数--生命周期函数详解
- Vue提高篇-生命周期及其钩子函数
- Vue 实例 (实例生命周期钩子、生命周期图示)
- vue知识点(一)—— 生命周期和钩子函数