The implementation principle of provide/inject

In Vue 3, provide/inject is an API for cross-level component communication, allowing ancestor components to inject dependencies into descendant components without passing them down through props layer by layer. Its core implementation relies on Vue's reactivity system and the dependency collection mechanism of component instances.

Basic Usage and Concepts

provide and inject are typically used together. Ancestor components provide data via provide, while descendant components inject this data via inject:

// Ancestor component
const Ancestor = {
  provide() {
    return {
      theme: 'dark'
    }
  }
}

// Descendant component
const Descendant = {
  inject: ['theme'],
  created() {
    console.log(this.theme) // Outputs 'dark'
  }
}

Implementation Principle Analysis

Dependency Storage Structure

Vue 3 internally maintains dependency relationships through the provides property. Each component instance's provides defaults to pointing to its parent component's provides, forming a prototype chain:

// During component instance initialization
const instance = {
  provides: parent ? parent.provides : Object.create(null)
}

When provide is called, a new object is created and assigned to the current component's provides, with its prototype set to the parent component's provides:

function provide(key, value) {
  let provides = currentInstance.provides
  const parentProvides = currentInstance.parent?.provides
  
  if (parentProvides === provides) {
    provides = currentInstance.provides = Object.create(parentProvides)
  }
  
  provides[key] = value
}

Dependency Injection Process

inject traverses up the component tree:

function inject(key, defaultValue) {
  const instance = currentInstance
  if (instance) {
    const provides = instance.parent?.provides
    if (provides && key in provides) {
      return provides[key]
    } else if (arguments.length > 1) {
      return defaultValue
    }
  }
}

Reactivity Handling

When providing reactive data, Vue handles it specially:

// Providing reactive data
const Ancestor = {
  setup() {
    const count = ref(0)
    provide('count', count)
    return { count }
  }
}

// Injecting component
const Descendant = {
  setup() {
    const count = inject('count')
    // count remains reactive
  }
}

The internal implementation checks the value type:

function provide(key, value) {
  // ...
  if (isRef(value)) {
    provides[key] = value
  } else if (isReactive(value)) {
    provides[key] = value
  } else {
    provides[key] = value
  }
}

Advanced Feature Implementation

Default Value Handling

inject supports multiple ways to specify default values:

// Direct default value
inject('key', 'default')

// Factory function
inject('key', () => new ExpensiveObject())

// Object configuration
inject('key', { default: () => ({}) })

Implementation logic:

function inject(key, defaultValue) {
  // ...
  if (arguments.length > 1) {
    return typeof defaultValue === 'function' 
      ? defaultValue()
      : defaultValue
  }
}

Using Symbols as Keys

Using Symbols is recommended to avoid naming conflicts:

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

// Provider
provide(THEME_SYMBOL, 'dark')

// Injector
inject(THEME_SYMBOL)

Reactive Data Updates

When provided reactive data changes, all injecting components update automatically:

const Ancestor = {
  setup() {
    const count = ref(0)
    provide('count', count)
    
    setTimeout(() => {
      count.value++ // All components injecting count will update
    }, 1000)
  }
}

Differences from Vue 2 Implementation

Vue 3's provide/inject has significant improvements:

1. Performance Optimization: Vue 3 uses prototype chains, avoiding the overhead of recursively copying the entire provide object in Vue 2.
2. Composition API Support: Can be used in setup.
3. Type Inference: Better TypeScript support.

Vue 2 implementation pseudocode:

// Vue 2 implementation
function provide(key, value) {
  if (!this._provided) {
    this._provided = {}
  }
  this._provided[key] = value
}

function inject(key) {
  let parent = this.$parent
  while (parent) {
    if (parent._provided && key in parent._provided) {
      return parent._provided[key]
    }
    parent = parent.$parent
  }
}

Key Source Code Locations

In Vue 3's source code, the main implementation is located in:

1. packages/runtime-core/src/apiInject.ts: Core API implementation.
2. packages/runtime-core/src/component.ts: Handles provides during component initialization.

Key functions:

// Initialize provides
export function initProvides(instance: ComponentInternalInstance) {
  const provides = instance.parent
    ? instance.parent.provides
    : Object.create(null)
  instance.provides = provides
}

// provide implementation
export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
  const instance = currentInstance || currentRenderingInstance
  if (instance) {
    let provides = instance.provides
    const parentProvides = instance.parent && instance.parent.provides
    if (parentProvides === provides) {
      provides = instance.provides = Object.create(parentProvides)
    }
    provides[key as string] = value
  }
}

// inject implementation
export function inject<T>(key: InjectionKey<T> | string): T | undefined
export function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: T,
  treatDefaultAsFactory?: false
): T
export function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: T | (() => T),
  treatDefaultAsFactory: true
): T

Practical Application Scenarios

Global State Sharing

Alternative to Vuex for simple scenarios:

// global.js
import { reactive, provide, inject } from 'vue'

const stateSymbol = Symbol('state')
const createState = () => reactive({ count: 0 })

export const provideState = () => {
  const state = createState()
  provide(stateSymbol, state)
  return state
}

export const useState = () => inject(stateSymbol)

Form Component Design

Linking form controls to forms:

// Form.vue
export default {
  setup(props) {
    const formData = reactive({})
    provide('form-data', formData)
    provide('form-errors', computed(() => validate(formData)))
  }
}

// FormItem.vue
export default {
  setup(props) {
    const formData = inject('form-data')
    const errors = inject('form-errors')
    
    return {
      value: computed({
        get: () => formData[props.name],
        set: (v) => formData[props.name] = v
      }),
      error: computed(() => errors[props.name])
    }
  }
}

Plugin Development

Plugins can inject services into the app:

const Plugin = {
  install(app) {
    app.provide('api', {
      fetchData() { /* ... */ }
    })
  }
}

// Usage in components
const api = inject('api')
api.fetchData()

Performance Considerations and Best Practices

1. Avoid Overuse: Only use for truly cross-level communication.
2. Use Symbol Keys: Prevent naming conflicts.
3. Use Reactivity Judiciously: Only provide reactive data when necessary.
4. Type Safety: Use InjectionKey with TypeScript:

import type { InjectionKey } from 'vue'

interface UserInfo {
  name: string
  age: number
}

const userInfoKey = Symbol() as InjectionKey<UserInfo>

// Provide
provide(userInfoKey, { name: 'Alice', age: 25 })

// Inject
const userInfo = inject(userInfoKey) // Type is UserInfo | undefined

Edge Case Handling

Warnings for Missing Provides

In development, Vue checks for missing keys:

function inject(key) {
  // ...
  if (__DEV__ && !provides) {
    warn(`injection "${String(key)}" not found.`)
  }
}

Circular Dependency Handling

Vue correctly handles circular dependencies in the component tree:

// A provides, B injects, C provides same key, D injects
// Correctly gets the nearest ancestor's value

SSR Compatibility

Behavior is consistent in SSR, but note:

// Avoid using outside setup
export default {
  inject: ['key'],
  asyncData() {
    // Accessing this.key here may be unreliable
  }
}

Comparison with Other APIs

vs. Props

vs. Event Bus

// Event bus pattern
const bus = mitt()
bus.emit('event')
bus.on('event', handler)

// provide/inject pattern
provide('eventBus', {
  emit: (e) => {/*...*/},
  on: (e, handler) => {/*...*/}
})

Advantages:

1. Clear component relationships.
2. Better type support.
3. Automatic cleanup.

Debugging Tips

View Current Injections

Log in components:

export default {
  setup() {
    const instance = getCurrentInstance()
    console.log(instance.parent?.provides)
  }
}

Custom Injection Logic

Override default behavior:

function myInject(key) {
  const instance = getCurrentInstance()
  // Custom lookup logic
}

Testing Strategies

Testing providers and consumers:

// Test provider
test('provides data', () => {
  const wrapper = mount(Provider, {
    global: {
      provide: {
        existing: 'value' // Mock parent provide
      }
    }
  })
  
  expect(wrapper.vm.provides).toHaveProperty('key')
})

// Test consumer
test('injects data', () => {
  const wrapper = mount(Consumer, {
    global: {
      provide: {
        key: 'test-value'
      }
    }
  })
  
  expect(wrapper.vm.injectedValue).toBe('test-value')
})