生命周期钩子函数其实就是 vue 实例的选项, 这些选项的值全部都是函数, 代表了该实例从出生到死亡这一生当中的各阶段, 只要达到该阶段就会自动触发. 生命周期的钩子函数都是同步执行的, 不会有异步队列, 也就是初始化实例的一瞬间全部执行完毕
vue 生命周期共分为四个阶段
实例创建
DOM 渲染
数据更新
销毁实例
共有八个基本钩子函数
1.beforeCreate -- 创建前
触发的行为: vue 实例的挂载元素 $el 和数据对象 data 都为 undefined, 还未初始化.
在此阶段可以做的事情: 加 loading 事件
2.created -- 创建后
触发的行为: vue 实例的数据对象 data 有了,$el 还没有
在此阶段可以做的事情: 解决 loading, 请求 Ajax 数据为 mounted 渲染做准备
3.beforeMount -- 渲染前
触发的行为: vue 实例的 $el 和 data 都初始化了, 但还是虚拟的 dom 节点, 具体的 data.filter 还未替换
在此阶段可以做的事情:...
4.mounted -- 渲染后
触发的行为: vue 实例挂载完成, data.filter 成功渲染
在此阶段可以做的事情: 配合路由钩子使用
5.beforeUpdate -- 更新前
触发的行为: data 更新时触发
在此阶段可以做的事情:...
6.updated - 更新后
触发的行为: data 更新时触发
在此阶段可以做的事情: 数据更新时, 做一些处理 (此处也可以用 watch 进行观测)
7.beforeDestroy - 销毁前
触发的行为: 组件销毁时触发
在此阶段可以做的事情: 可向用户询问是否销毁
8.destroyed - 销毁后
触发的行为: 组件销毁时触发, vue 实例解除了事件监听以及和 dom 的绑定 (无响应了), 但 DOM 节点依旧存在
在此阶段可以做的事情: 组件销毁时进行提示
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17148.html