您现在的位置是:首页 >技术交流 >vue生命周期网站首页技术交流

vue生命周期

程序打工仔 2024-09-12 12:01:04
简介vue生命周期

vue生命周期

1.vue生命周期的作用?

vue 的生命周期中有多个钩子函数,让咱们在控制整个 vue 实例的过程当中,更容易造成良好的逻辑。

2.对vue生命周期的理解,分别有哪些阶段?

vue生命周期分为8个阶段,创建前,创建后,载入前,载入后,销毁前,销毁后

  1. 创建前
    beforeCreated 阶段,vue 实例的挂载元素$el 和数据对象 data 都为 undefined,还未初始化。
  2. 创建后
    created 阶段,vue 实例的数据对象 data 有了,$el 还没有。
  3. 载入前
    beforeMount 阶段, vue 实例的$el 和 data 都初始化了, 但还是挂载之前为虚拟的 dom 节点, data.message 还未替换。
  4. 载入后
    在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
  5. 更新前
    当 data 变化时,会触发 beforeUpdate 方法。
  6. 更新后
    当 data 变化后,会触发 updated 方法。
  7. 销毁前
    beforeDestory 阶段,在执行 destroy 方法时会触发。
  8. 销毁后
    destoryed 阶段,在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在。
  9. dctivated阶段,被 keep-alive 缓存的组件激活时调用。
  10. deactivated阶段,被 keep-alive 缓存的组件失活时调用。
  11. errorCaptured阶段,在捕获一个来自后代组件的错误时被调用。

3.vue 实例生命周期钩子函数具体适用的场景?

  1. beforecreate:可以在这加个loading事件,在加载实例时触发
  2. created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用。
  3. mounted : 挂载元素,获取到 DOM 节点。
  4. updated : 如果对数据统一处理,在这里写上相应函数。
  5. beforeDestroy : 可以做一个确认停止事件的确认框。

4.第一次加载时会触发哪几个钩子?

会触发
beforeCreate;
created;
beforeMount;
mounted;

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。