Vue 的生命周期方法有哪些 一般在哪一步发请求

beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问

created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。这里没有$el,如果非要想与 Dom 进行交互,可以通过 vm.$nextTick 来访问 Dom

beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted 在挂载完成后发生,在当前阶段,真实的 Dom 挂载完毕,数据完成双向绑定,可以访问到 Dom 节点

beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁(patch)之前。可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程

updated 发生在更新完成之后,当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新,该钩子在服务器端渲染期间不被调用。

beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。我们可以在这时进行善后收尾工作,比如清除计时器。

destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

activated keep-alive 专属,组件被激活时调用

deactivated keep-alive 专属,组件被销毁时调用

异步请求在哪一步发起?

可以在钩子函数 created、beforeMount、mounted 中进行异步请求,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。

如果异步请求不需要依赖 Dom 推荐在 created 钩子函数中调用异步请求,因为在 created 钩子函数中调用异步请求有以下优点:

  • 能更快获取到服务端数据,减少页面 loading 时间;
  • ssr 不支持 beforeMount 、mounted 钩子函数,所以放在 created 中有助于一致性;

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue.js生命周期是一个重要的概念,它描述了组件从创建到销毁整个过程中各个阶段的状态变化以及在每个阶段可以执行的操作。`activated` 生命周期钩子属于 Vue Router 的导航守卫(Navigation Guards),而不是原生 Vue 组件的生命周期钩子。 在 Vue Router 中,当路由激活时会触 `beforeEnter`, `enter`, 和 `afterEnter` 这些钩子函数,其中 `activate` 钩子函数是在完成页面渲染并挂载到 DOM 后立即调用的一个函数。这个钩子函数通常用于处理一些依赖于当前组件实例或数据初始化的任务,例如: ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isUserAuthenticated()) { // 如果目标路由需要认证而用户未登录,则跳转到登录页面 next({ path: '/login', query: { redirect: to.path } }); } else { // 其他情况正常进行路由跳转 next(); } }); export function isUserAuthenticated() { // 检查用户是否已通过身份验证 } // 在组件中使用 activated() { // 当路由被激活时执行的操作,如加载额外的数据、订阅事件等 } ``` 注意,上述示例展示的是如何在路由激活时使用 Vue Router 的导航守卫功能,而非直接在 Vue 组件内部访问 `activated` 生命周期钩子。在传统的 Vue 组件中,实际的生命周期钩子有以下几个关键点: 1. **beforeCreate**: 组件创建之前,即实例创建之后,属性和数据尚未绑定。 2. **created**: 执行完毕后,所有的数据都已经设置好了,但是模板解析还没有开始,所以此时无法操作 DOM。 3. **beforeMount**: 组件将要挂载到 DOM 上之前的最后一步,可以在此处进行与 DOM 相关的操作,比如监听事件或执行 AJAX 请求获取数据。 4. **mounted**: 组件已经完全挂在 DOM 中,此时可以执行与 DOM 相关的操作,如添加自定义事件处理器。 5. **beforeUpdate**: 虽然名字叫 "更新",但在 Vue 3.x 中实际上代表了数据变动之后、视图重新渲染之前。 6. **updated**: 视图已经被更新后的回调,在这里可以执行与视图更新相关的操作。 7. **beforeDestroy**: 组件即将被销毁前的最后一次回调。 8. **destroyed**: 组件及其所有子组件完全销毁之后执行的回调。 在了解以上内容的基础上,如果你还有其他关于 Vue.js 或者其生命周期的相关疑问,请随时提问。接下来我会提出三个相关问题供你思考:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小鹏在哪儿呢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值