provide/inject

provide/inject
能够用于实现祖先和后代之间的传值
parent 父组件

<template>
  <div class="parent">
    <h1>parent</h1>
    <Child />
  </div>
</template>

<script>

import Child from '../components/Child.vue'
import { provide } from '@vue/runtime-core'
export default {
  components:{
    Child
  },
  setup() {

    provide("child","父给子的数据")
    provide("grand","父给孙的数据")

  },
}
</script>

child 组件

<template>
   <div class="child">
     <p>child: {{item}}</p>
     <Grand />
  </div>

</template>
<script>
import Grand from './Grand.vue'
import { reactive ,toRefs,inject } from "vue";
export default{
  components:{
    Grand
  },
  setup() {

    let state = reactive({
      item: inject("child")
    });

    return {  
      ...toRefs(state), 
    }
  },
}
</script>

grand 孙组件

<template>
   <div class="grand">
     <p>grand {{item}}</p>
  </div>

</template>
<script>

import { reactive ,toRefs,inject } from "vue";

export default{
  setup() {

    let state = reactive({
      item: inject('grand')
    });

    return {  
      ...toRefs(state), 
    }
  },
}
</script>

provide源码

// 初始化Provide的实现
export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

// vm.$options是怎么来的，是通过mergeOpitions得到的
if (options && options._isComponent) {
  // optimize internal component instantiation
  // since dynamic options merging is pretty slow, and none of the
  // internal component options needs special treatment.
  initInternalComponent(vm, options);
} else {
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  );
}

// 我们在看看mergeOptions的实现
const options = {}
let key
for (key in parent) {
  mergeField(key)
}
for (key in child) {
  if (!hasOwn(parent, key)) {
    mergeField(key)
  }
}
function mergeField (key) {
  const strat = strats[key] || defaultStrat
  options[key] = strat(parent[key], child[key], vm, key)
}
return options

// 找到strat方法的实现
strats.provide = mergeDataOrFn;

export function mergeDataOrFn (
  parentVal: any,
  childVal: any,
  vm?: Component
): ?Function {
  if (!vm) {
    // in a Vue.extend merge, both should be functions
    if (!childVal) {
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    return function mergedDataFn () {
      return mergeData(
        typeof childVal === 'function' ? childVal.call(this, this) : childVal,
        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
      )
    }
  } else {
    return function mergedInstanceDataFn () {
      // instance merge
      const instanceData = typeof childVal === 'function'
        ? childVal.call(vm, vm)
        : childVal
      const defaultData = typeof parentVal === 'function'
        ? parentVal.call(vm, vm)
        : parentVal
      if (instanceData) {
        return mergeData(instanceData, defaultData)
      } else {
        return defaultData
      }
    }
  }
}

从上面的逻辑可以看出，在组件初始化时，会将vm.$options.provide这个函数赋值给provide，并把调用该函数得到的结果赋值给vm._provided，那么就会得到vm._provided = { foo: "我是祖先类定义provide" }

inject源码

// 首先，初始化inject
export function initInjections (vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    toggleObserving(false)
    Object.keys(result).forEach(key => {
      /* istanbul ignore else */
      if (process.env.NODE_ENV !== 'production') {
        defineReactive(vm, key, result[key], () => {
          warn(
            `Avoid mutating an injected value directly since the changes will be ` +
            `overwritten whenever the provided component re-renders. ` +
            `injection being mutated: "${key}"`,
            vm
          )
        })
      } else {
        defineReactive(vm, key, result[key])
      }
    })
    toggleObserving(true)
  }
}

// 初始化的inject实际上是resolveInject的结果，下面我们看看resolve都有哪些操作
// 第一步：获取组件中定义的inject的key值，然后进行遍历
// 第二步：根据key值获取对应的在provide中定义的provideKey，就比如上面的根据"childFoo"获取到"foo"
// 第三步：通过source = source.$parent逐级往上循环在_provided中查找对应的provideKey
// 第四步：如果找到，将实际的key值作为键，source._provided[provideKey]作为值，存为一个对象，当作这个函数的结果
export function resolveInject (inject: any, vm: Component): ?Object {
  if (inject) {
    // inject is :any because flow is not smart enough to figure out cached
    const result = Object.create(null)
    const keys = hasSymbol
      ? Reflect.ownKeys(inject)
      : Object.keys(inject)

    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      // #6574 in case the inject object is observed...
      if (key === '__ob__') continue
      const provideKey = inject[key].from
      let source = vm
      while (source) {
        if (source._provided && hasOwn(source._provided, provideKey)) {
          result[key] = source._provided[provideKey]
          break
        }
        source = source.$parent
      }
      if (!source) {
        if ('default' in inject[key]) {
          const provideDefault = inject[key].default
          result[key] = typeof provideDefault === 'function'
            ? provideDefault.call(vm)
            : provideDefault
        } else if (process.env.NODE_ENV !== 'production') {
          warn(`Injection "${key}" not found`, vm)
        }
      }
    }
    return result
  }
}

当祖先组件在初始化时，vue首先会通过mergeOptions方法将组件中provide配置项合并vm.$options中，并通过mergeDataOrFn将provide的值放入当前实例的_provided中，此时当子孙组件在初始化时，也会通过合并的options解析出当前组件所定义的inject，并通过向上逐级遍历查找的方式，在祖先实例的-provided中找到对应的value值