组合式 API：生命周期

onMounted()

注册一个回调函数，在组件挂载完成后执行。这个钩子在服务器端渲染期间不会被调用。

例子：

<template>
  <div ref="el"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
  const el = ref()
  onMounted(() => {
    el.value
    console.log('22222', el.value)//<div></div>
  })
</script>

onUpdated()

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

注意：不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！

<template>
  <button id="count" @click="count++">{{ count }}</button>
</template>

<script setup>
import {onUpdated, ref} from "vue";
  const count = ref(0)
  onUpdated(() => {
    console.log('onUpdated',count.value)
  })
</script>

onUnmounted()

注册一个回调函数，在组件实例被卸载之后调用。 一个组件在以下情况下被视为已卸载：

• 其所有子组件都已经被卸载。

• 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

这个钩子在服务器端渲染期间不会被调用

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

let intervalId
onMounted(() => {
  intervalId = setInterval(() => { })
  console.log('onMounted')
})
//销毁
onUnmounted(() => {
    clearInterval(timer)
    console.log('onUnmounted')
  })
</script>

onBeforeMount()

注册一个钩子，在组件被挂载之前被调用。

当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

这个钩子在服务器端渲染期间不会被调用。

onBeforeUpdate()

注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

这个钩子在服务器端渲染期间不会被调用。

onBeforeUnmount()

注册一个钩子，在组件实例被卸载之前调用。

这个钩子在服务器端渲染期间不会被调用。

onErrorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

function onErrorCaptured(callback: ErrorCapturedHook): void

type ErrorCapturedHook = (
  err: unknown,
  instance: ComponentPublicInstance | null,
  info: string
) => boolean | void

onActivated() 和onDeactivated()

• onActivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。

• onDeactivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。

这个钩子在服务器端渲染期间不会被调用。

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
})

onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
})
</script>

onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。

例子：

<template>
  <div>
    <keep-alive>
      <tab></tab>
    </keep-alive>
  </div>
</template>
<script setup>
    import Tab from '../components/tab.vue'
</script>

tab.vue文件

<template>
  <div>
    <h2>Tab 1</h2>
    <input type='text' placeholder='this content will persist!'/>
  </div>
</template>

<script setup>
import {onActivated, onDeactivated} from "vue";

onActivated(() => {
  console.log('Tab 1 Activated')
})

onDeactivated(() => {
  console.log('Tab 1 Deactivated')
})
</script>