依赖注入

Prop 逐级穿透问题

有这样一个多层级嵌套的组件,如果子组件D需要某个父组件A的数据,仅使用props逐级传递的话,需要将数据从A传递给B,再传递给C,最后传递给D,如果层级很深的话,代码会显得非常冗余 而且中间过程中子组件B/C可能根本不关心这个数据,但是为了能让D获取到数据也必须层层传递下去,这个问题被叫做Prop逐级穿透问题

provide和inject可以解决Prop逐级穿透问题.父组件作为所有后代组件的依赖提供者,任何后代组件无论层级有多深,都可以注入由父组件提供给整条链路的依赖

Provide(提供)

使用provide函数为后代组件提供数据

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

  provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

import { provide } from 'vue'

export default {
  setup() {
    provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
  },
}

provide()函数接收两个参数,第一个参数为注入参数注入名,第二个参数为注入参数value,value可以是任意类型,包括响应式数据

import { ref, provide } from 'vue'

const count = ref(0)
provide('key', count)

应用层 Provide

除了在组件中提供依赖,我们还可以再整个应用层面提供依赖

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

应用级别提供的数据在该应用内的所有组件都可以注入.这在编写插件是会特别有用,因为插件一般都不会使用组件形式来提供值

Inject(注入)

子组件中使用inject()函数注入由父组件提供的数据

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

  const message = inject('message')
</script>

import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  },
}

如果有多个父组件提供了相同key的数据,inject函数会使用最深的那个提供者的数据(组件链上最近的父组件)

如果提供的值是一个ref,注入进来的会是一个ref对象,而不会子哦给你解包为其内部的值.如果提供的是非响应式数据,注入进来的是原始数据

注入默认值

默认情况下,inject假设传入的注入名会是由祖先链上的某个组件提供,如果该注入名没有任何组件提供,会抛出一个运行时警告

如果在注入一个值时,不要求必须有提供者,可以给inject函数传递一个默认值

// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')

在一些场景中,默认值可能需要通过调用一个函数或初始化一个类来获得.为了避免在用不到默认值的情况下进行不必要的计算或产生副作用,我们可以使用工厂函数来创建默认值

const value = inject('key', () => new ExpensiveClass(), true)

第三个参数表示默认值应该被当作一个工厂函数

和响应式数据配合使用

当提供/注入响应式数据时,尽可能将任何对响应式数据变更的操作保持在供给方组件中,如果一定需要在注入方组件中更改数据,推荐在供给方组件中提供一个更改数据的方法函数

<!-- 在供给方组件内 -->
<script setup>
  import { provide, ref } from 'vue'

  const location = ref('North Pole')

  function updateLocation() {
    location.value = 'South Pole'
  }

  provide('location', {
    location,
    updateLocation,
  })
</script>

<!-- 在注入方组件 -->
<script setup>
  import { inject } from 'vue'

  const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

如果想确保提供的数据不会被注入组件修改,可以使用readonly函数来包装响应式数据

<script setup>
  import { ref, provide, readonly } from 'vue'

  const count = ref(0)
  provide('read-only-count', readonly(count))
</script>

使用 Symbol 作为注入名

当项目中包含非常多的依赖提供,建议使用Symbol来作为注入名以避免潜在的冲突

通常在一个单独的文件中导出这些注入名Symbol

// keys.js
export const keyFoo = Symbol()

然后在组件中使用这些注入名

// 在供给方组件中
import { provide } from 'vue'
import { myInjectionKey } from './keys.js'

provide(myInjectionKey, {
  /* 要提供的数据 */
})

// 注入方组件
import { inject } from 'vue'
import { myInjectionKey } from './keys.js'

const injected = inject(myInjectionKey)