vue3-生命周期

海市蜃楼xl
381 阅读4分钟

生命周期钩子

vue2到vue3生命周期变化

阶段Vue2Vue3
初始化beforeCreate无（直接写 setup 里）
创建完成created无（直接写 setup 里）
挂载前beforeMountonBeforeMount
挂载完成mountedonMounted
更新前beforeUpdateonBeforeUpdate
更新后updatedonUpdated
销毁前beforeDestroyonBeforeUnmount
销毁后destroyedonUnmounted
KeepAlive前activatedonActivated
KeepAlive后deactivatedonDeactivated

注册周期钩子

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>
  • 当调用 onMounted 时，Vue 会自动将回调函数注册到当前正被初始化的组件实例上。
  • 这些钩子应当在组件初始化时被同步注册
  • 例如，请不要这样做：
setTimeout(() => {
  onMounted(() => {
    // 异步注册时当前组件实例已丢失
    // 这将不会正常工作
  })
}, 100)
  • 注意这并不意味着对 onMounted 的调用必须放在 setup() 或 <script setup> 内的词法上下文中。
  • onMounted() 也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自 setup() 就可以。

所有生命周期钩子

1、onBeforeUpdate()
  • 在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
2、onMounted()
  • 在组件挂载完成后执行。
  • 组件在以下情况下被视为已挂载：
  • 其所有同步子组件都已经被挂载 (不包含异步组件或 树内的组件)。
  • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
  • 这个钩子在服务器端渲染期间不会被调用。
3、onUpdated()
  • 在组件因为响应式状态变更而更新其 DOM 树之后调用。
  • 父组件的更新钩子将在其子组件的更新钩子之后调用。
  • 这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的，因为多个状态变更可以在同一个渲染周期中批量执行 (考虑到性能因素)。
  • 如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。
  • 这个钩子在服务器端渲染期间不会被调用。
4、onErrorCaptured()
  • 在捕获了后代组件传递的错误时调用。
  • 错误可以从以下几个来源中捕获：：组件渲染、事件处理器、生命周期钩子、setup() 函数、侦听器、自定义指令钩子、过渡钩子
  • 这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。
5、onActivated()
  • 若组件实例是 缓存树的一部分，当组件被插入到 DOM 中时调用。
  • 这个钩子在服务器端渲染期间不会被调用。
6、onDeactivated()
  • 若组件实例是 缓存树的一部分，当组件从 DOM 中被移除时调用。
  • 这个钩子在服务器端渲染期间不会被调用。
7、onBeforeUnmount
  • 在组件实例被卸载之前调用。
  • 当这个钩子被调用时，组件实例依然还保有全部的功能。
  • 这个钩子在服务器端渲染期间不会被调用。
8、onUnmounted()
  • 在组件实例被卸载之后调用。
  • 一个组件在以下情况下被视为已卸载：
  • 其所有子组件都已经被卸载。
  • 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
  • 这个钩子在服务器端渲染期间不会被调用。
9、onServerPrefetch() SSR ONly
  • 在组件实例在服务器上被渲染之前调用。
  • 如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。
  • 这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。调用。
<script setup>
import { ref, onServerPrefetch, onMounted } from 'vue'

const data = ref(null)

onServerPrefetch(async () => {
  // 组件作为初始请求的一部分被渲染
  // 在服务器上预抓取数据，因为它比在客户端上更快。
  data.value = await fetchOnServer(/* ... */)
})

onMounted(async () => {
  if (!data.value) {
    // 如果数据在挂载时为空值，这意味着该组件
    // 是在客户端动态渲染的。将转而执行
    // 另一个客户端侧的抓取请求
    data.value = await fetchOnClient(/* ... */)
  }
})
</script>
10、onRenderTracked()
  • 当组件渲染过程中追踪到响应式依赖时调用。
  • 这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
11、onRenderTriggered()
  • 当响应式依赖的变更触发了组件渲染时调用。
  • 这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
avatar
文章
阅读
粉丝