Vue 3的provide和inject用法

前言

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

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

在组合式API中的用法

基本用法

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

顶级组件：

<template>
  <div>
    <son />
  div>
template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
provide("abc", "123");
script>

子组件：

<template>
  <div>
    <grandson />
  div>
template>

<script setup>
import grandson from "./grandson.vue";
script>

孙组件：

<template>
  <div>我是孙子div>
template>

<script setup>
import { inject } from "vue";
const abc = inject("abc");
console.log(abc);
script>

官方说：

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"))
})