《vue3基础知识》学习笔记Day31-（Period2）组合式API——生命周期钩子和依赖注入

生命周期钩子1.2.3.4.5.6钩子函数在服务器端渲染期间不会被调用。

1.onMounted()

注册一个回调函数，在组件挂载完成后执行

2.onUpdated()

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

如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代

3.onUnmounted()

注册一个回调函数，在组件实例被卸载之后调用

4.onBeforeMount()

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

5.onBeforeUpdated()

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

6.onBeforeUnmount()

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

7.onErrorCaptured()

注册一个钩子，在捕捉了后代组件传递的错误时调用

错误可以从以下几个来源中捕获：

• 组件渲染
• 事件处理器
• 生命周期钩子
• setup() 函数
• 侦听器
• 自定义指令钩子
• 过渡钩子

  ---

  依赖注入  

 1.provide() 提供一个值，可以被后代组件注入。 

<script setup>
import { ref, provide } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 提供静态值
provide('foo', 'bar')

// 提供响应式的值
const count = ref(0)
provide('count', count)

// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
</script>

2.inject() 注入一个由祖先组件或整个应用（通过app.provide()）提供的值

使用方式：假设有一个父组件已经提供了一些值，如前面 provide() 的例子中所示

<script setup>
import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 注入值的默认方式
const foo = inject('foo')

// 注入响应式的值
const count = inject('count')

// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)

// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')

// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())

// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)
</script>