Vue（七）keep-alive 与 生命周期

xulei1998
1,401 阅读2分钟

Vue的生命周期就是 Vue 实例从创建到销毁的全过程。

钩子函数 11个

八个普通：

  • 创建 — 在组件创建时执行 (beforeCreate + created)
  • 挂载 — DOM 被挂载时执行 (beforeMount + mounted)
  • 更新 — 当响应数据被修改时执行 (beforeUpdate + updated)
  • 销毁 — 在元素被销毁之前立即运行 (beforeDestroy + destroyed) 三个特殊：
  • activated 被 keep-alive 缓存的组件激活时执行
  • deactivated 被 keep-alive 缓存的组件失活时执行
  • errorCaptured 当捕获一个来自子孙组件的错误时执行

new Vue() -> beforeCreate -> data响应式、事件绑定 -> created -> beforeMount --> 挂载、渲染、用户看到视图 -> mounted -> beforeUpdate -> 数据更新，diff 后重新渲染 -> updated -> ... -> beforeDestroy -> 删除DOM元素 -> destroyed

image.png

注意在 Vue3 中：

  • 不再需要 beforeCreate 和 created
  • beforeMount + mounted -> onBeforeMount + onMounted
  • beforeUpdate + updated -> onBeforeUpdate + onUpdated
  • beforeDestroy + destroyed -> onBeforeUnmount + onUnmounted
  • errorCaptured -> onErrorCaptured

问：数据请求放在哪个钩子？mounted

问： 发送 Ajax 请求放在哪个钩子？ created 越早越好，数据响应快

keep-alive

在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染，文档在这里。

文档：和 <transition>相似，<keep-alive> 是一个抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中，其功能是可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

用法

  • 缓存动态组件 动态组件本身会执行创建到销毁的过程，加了keep-alive，不会被销毁，下次渲染时直接从缓存中渲染。
<keep-alive> 
  <comp-a v-if="a>1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
  • 缓存路由组件 使用keep-alive可以将所有路径匹配到的路由组件都缓存起来，包括路由组件里面的组件。
<keep-alive>
  <router-view></router-view>
</keep-alive>

相关钩子

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。

  • activated：在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。
    • 页面首次渲染，第一次进入这些组件/路由，触发顺序：created -> mounted -> activated
    • 退出时触发 deactivated
    • 再次进入这些组件/路由时，使用缓存，只触发 activated。
    // beforeCreate created beforeMount mounted 都不会触发。
  • deactivated：组件被停用(离开路由)时调用。
    • 使用keep-alive就不会调用beforeDestroy(销毁前)和destroyed(销毁)，因为组件没被销毁，被缓存了。
    • deactivated 相当于替换了 beforeDestroy。
    • 之后的调用时机：deactivated -> activated
avatar
文章
阅读
粉丝