您现在的位置是:首页 >技术交流 >vue生命周期网站首页技术交流
vue生命周期
简介vue生命周期
vue生命周期
1.vue生命周期的作用?
vue 的生命周期中有多个钩子函数,让咱们在控制整个 vue 实例的过程当中,更容易造成良好的逻辑。
2.对vue生命周期的理解,分别有哪些阶段?
vue生命周期分为8个阶段,创建前,创建后,载入前,载入后,销毁前,销毁后
- 创建前
beforeCreated 阶段,vue 实例的挂载元素$el 和数据对象 data 都为 undefined,还未初始化。- 创建后
created 阶段,vue 实例的数据对象 data 有了,$el 还没有。- 载入前
beforeMount 阶段, vue 实例的$el 和 data 都初始化了, 但还是挂载之前为虚拟的 dom 节点, data.message 还未替换。- 载入后
在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。- 更新前
当 data 变化时,会触发 beforeUpdate 方法。- 更新后
当 data 变化后,会触发 updated 方法。- 销毁前
beforeDestory 阶段,在执行 destroy 方法时会触发。- 销毁后
destoryed 阶段,在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在。- dctivated阶段,被 keep-alive 缓存的组件激活时调用。
- deactivated阶段,被 keep-alive 缓存的组件失活时调用。
- errorCaptured阶段,在捕获一个来自后代组件的错误时被调用。
3.vue 实例生命周期钩子函数具体适用的场景?
- beforecreate:可以在这加个loading事件,在加载实例时触发
- created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用。
- mounted : 挂载元素,获取到 DOM 节点。
- updated : 如果对数据统一处理,在这里写上相应函数。
- beforeDestroy : 可以做一个确认停止事件的确认框。
4.第一次加载时会触发哪几个钩子?
会触发
beforeCreate;
created;
beforeMount;
mounted;
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。