学习vue源码(18)三探生命周期之初始化provide与inject

1,070 阅读2分钟

上篇文章学习vue源码(17)再探生命周期之初始化实例属性及事件讲解了初始化阶段的

    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)

即beforeCreate钩子函数触发前对实例 属性和事件的初始化。

  // src/core/instance/init.js
  Vue.prototype._init = function (options?: Object) {
    ……
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
  }

这一次来讲解 created钩子函数触发前,beforeCreate触发后 的initInjections和initProvide,可能你会问为什么initState为什么不一起讲呢,因为initState也是一个大块头,放到后面单独讲一下。

概念解析

成对出现:provide和inject是成对出现的

作用:用于父组件向子孙组件传递数据

使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

使用场景:由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

使用

provide和inject需要配合使用,是多层级组件的通信方式。相信,面试问vue组件间有哪些通信方式,就会提到这个。(什么?你说你不知道。。。,那正好可以了解下,下次有得说了)

简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱。这个就是这对选项要干的事情

provide和inject需要配合使用,它们的含义如下:

provide:一个对象或返回一个对象的函数,该对象包含可注入起子孙的属性,可以使用ES6的Symbols作为key(只有原生支持Symbol才可以)

inject:inject 选项应该是一个字符串数组或一个对象,该对象的 key 代表了本地绑定的名称,value 为其 key (字符串或 Symbol) 以在可用的注入中搜索。

来个例子理解一下

<!DOCTYPE html>    
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>Document</title>    
</head>
<body>
    <div id="app"><child></child></div>
    <script>
        Vue.component('child',{
            inject:['message'],
            template:'<p>{{message}}</p>'
        })
        new Vue({
            el:'#app',
            provide:{message:'Hello Vue!'}
        })
    </script>
</body>
</html>

输出:Hello Vue!,对应的DOM节点渲染为:

是不是感觉和props的传值差不多,当然这不是 provide/inject该干的事情,我们在中间再嵌套一层组件就知道他的用处了,例如:

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app"><test></test></div>
    <script>
        Vue.component('child',{
            inject:['message'],
            template:'<p>{{message}}</p>'
        })
        Vue.component('test',{
            template:`<div><child></child></div>`
        })
        new Vue({
            el:'#app',
            provide:{message:'Hello Vue!'}
        })
    </script>
</body>
</html>

provide/injec就是做这个用的,多层嵌套时用起来不要太爽噢

源码分析

provide

// src/core/instance/inject.js
export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

provide 是向下传递数据的选项。这里先拿到 provide 选项中的内容,如果有 provide 选项,将 provide 选项传递给 vm._provided 变为 Vue 实例全局数据。

这里看一下例子更清楚,下例中传入数据 foo,数据内容为 bar。

var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

inject

// src/core/instance/inject.js
export function initInjections (vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    observerState.shouldConvert = false
    Object.keys(result).forEach(key => {
      defineReactive(vm, key, result[key])
    })
    observerState.shouldConvert = true
  }
}

简化后的源码可以看到,首先通过 resolveInject 方法获取 inject 选项搜索结果,如果有搜索结果,遍历搜索结果并为其中的数据添加 setter 和 getter。 接着来看下 resolveInject 方法:

export function resolveInject (inject: any, vm: Component): ?Object {
  if (inject) {
    const result = Object.create(null)
    // 获取 inject 选项的 key 数组
    const keys = hasSymbol
      ? Reflect.ownKeys(inject).filter(key => {
        /* istanbul ignore next */
        return Object.getOwnPropertyDescriptor(inject, key).enumerable
      })
      : Object.keys(inject)

    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      const provideKey = inject[key].from
      let source = vm
      while (source) {
        if (source._provided && provideKey in source._provided) {
          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
  }
}

获取 inject 选项的 key 数组

遍历 key 数组,通过向上冒泡来查找 provide 中是否有 key 与 inject 选项中 from 属性同名的

如果有,则将这个数据传递给 result;

如果没有,检查 inject 是否有 default 选项设定默认值或者默认方法,如果有则将默认值返传给 result,最终返回 result 对象。

所以,inject 的写法应该是有 default 默认值的:

const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

或者是有 from 查找键和 default 默认值的:

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

或者为 default 默认值设定一个工厂方法:

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

好吧,我承认这就是引用的官网的三个例子~ 不过意思到就好啦。

本文使用 mdnice 排版