了解Vue 3的provide和inject用法

前言

provide和inject在Vue 2中已经被广泛应用，不是新鲜API，3.0重新认识一下它们两个。

一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。

在组合式API中的用法

基本用法

似乎，组合式API的provide没有提供批量方法， 只能每个变量写一句。

顶级组件：

子组件：

孙组件：

针对本文的评论，说明一下

官方说：

inject() can only be used inside setup() or functional components.

这个意思是说，inject()只能放在setup()生命周期里运行，不能放在别的周期里运行，也不能放在事件周期里运行。所以你可以先在setup()周期取值。

例一：这是允许的，因为console.log是setup()生命周期里的同步代码

function xx() {
  console.log(inject("abc"))
}
xx()

例二：这是禁止的，因为setTimeout是异步函数，执行console.log(inject("abc"))的时候已经不在setup()生命周期里。

function xx() {
  setTimeout(() => {
    console.log(inject("abc"))
  })
}
xx()

例三：让例一的xx函数作为鼠标事件回调，也是禁止的，原因也一样。

例四：放在Promise.then()也是禁止的，比如：

Promise.resolve().then(() => {
  console.log(inject("abc"))
})

一级组件修改数据，孙子组件监听变更

provide的变量必须是响应式变量，孙子组件监听的变量也必须是响应式变量。

一级组件：

孙子组件：

孙子组件修改数据，一级组件监听变更

一级组件除了提供数据，还要提供一个修改数据的方法，孙子组件要接收并使用这个方法，这样修改的就是一级组件的数据，修改之后又会影响孙子组件的数据。

一级组件：

孙子组件：

禁止孙子组件修改一级组件的数据

禁止的话，一级组件传递的变量必须是只读的，可以是readonly，也可以是shallowRef。这样孙子组件修改数据的话，一级组件不会有反应。

一级组件：

在配置项式API中的用法

跟Vue 2差不多，简单说一下。

provide

provide语法比在组合式API里要灵活，毕竟可以用对象。比如：

  provide: {
    user: 'John Doe',
  },

如果要把data里的数据provide，说白了就是打算用this，provide要写成函数：

  provide() {
    return {
      user: this.user,
      updateUser: this.updateUser
    }
  },

如果要提供计算属性，也是一样的道理，不过，如果不打算用配置项式计算属性，而是想用vue的computed方法，可以写成：

  provide() {
    return {
      userLength: computed(() => this.user.length),
      updateUser: this.updateUser
    }
  },

inject

inject的用法更简单，比如inject: ['user', 'updateUser']。

双向修改而且响应

想要双向修改而且响应，就必须借助reactive或者ref家族方法和computed方法。provide的数据必须是computed返回的数据，才能保证数据有变化时刷新孙子组件的数据。孙子组件要用computed + unref来解包装且计算属性，才能得到真正需要的数据。

可以看到，由于孙子组件的inject和computed的属性不能重名，所以我造出一个abcabc变量名，这就比较麻烦了。我们再看组合式API，就没有abcabc这种中间变量，原因是ref: abc = inject("abc");让接收和加响应式一气呵成，这也是组合式API的优势之一。

一级组件：

孙子组件：