生命周期相关问题

106 阅读1分钟

created

  • created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图

mounted

  • 在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

异步请求

  • 可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。
  • 推荐在 created 钩子函数中调用异步请求,因为在 created 钩子函数中调用异步请求有以下优点
    • 能更快获取到服务端数据,减少页面加载时间,用户体验更好
    • SSR 不支持 beforeMount 、mounted 钩子函数,放在 created 中有助于一致性

keep-alive 中的生命周期哪些

  • keep-alive 是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM
  • 如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁
  • 当组件被换掉时,会被缓存到内存中、触发 deactivated 生命周期;当组件被切回来时,再去缓存里找这个组件、触发 activated钩子函数

----------------------------------------------------------------------2024-06-09 每日一题