Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)？

一、核心原理（简单讲人话）

在 Vue3 中：

• provide 是父组件提供一个依赖值；

• inject 是子组件接收这个依赖值；

• 默认情况下，provide 提供的是一个「普通的引用值」，而不是响应式的。

这意味着：

二、最简单示例：静态 provide（不响应）

<!-- App.vue -->
<template>
  <div>
    <h2>父组件</h2>
    <button @click="changeName">修改名字</button>
    <Child />
  </div>
</template>

<script setup>
import { provide } from 'vue'
import Child from './Child.vue'

let username = '小明'

// 向子组件提供 username
provide('username', username)

function changeName() {
  username = '小红'
  console.log('父组件修改了 username =', username)
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <h3>子组件</h3>
    <p>用户名：{{ username }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue'
const username = inject('username')
</script>

运行结果：

• 初始显示：用户名：小明

• 点击“修改名字”按钮后，子组件界面不会更新！

原因：

因为 provide('username', username) 提供的是普通字符串，不具备响应式特性。

三、扩展版：让 provide 变成响应式的（推荐写法）

要让子组件能「自动响应父组件异步变化」，只需要用 ref 或 reactive 包装即可。

<!-- App.vue -->
<template>
  <div>
    <h2>父组件</h2>
    <button @click="changeName">异步修改名字（2秒后）</button>
    <Child />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import Child from './Child.vue'

const username = ref('小明')

//  提供响应式的值
provide('username', username)

function changeName() {
  setTimeout(() => {
    username.value = '小红'
    console.log('父组件异步修改 username = 小红')
  }, 2000)
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <h3>子组件</h3>
    <p>用户名：{{ username }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue'
const username = inject('username') // 自动响应
</script>

运行结果：

• 初始显示：用户名：小明

• 点击按钮后 2 秒 → 自动更新为：用户名：小红

因为我们注入的是 ref，Vue3 会自动处理 .value 的响应式绑定。

四、错误示例：异步 provide 失效的情况（常见坑）

有时新手会这么写：

<!-- App.vue -->
<template>
  <div>
    <h2>父组件</h2>
    <button @click="loadData">异步加载 provide 值</button>
    <Child />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue'
import Child from './Child.vue'

let user = null

function loadData() {
  setTimeout(() => {
    user = { name: '异步用户' }
    provide('user', user) //  错误！在 setup 外部、异步中调用 provide 无效
    console.log('异步 provide 完成')
  }, 2000)
}

provide('user', user)
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>子组件：{{ user }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue'
const user = inject('user')
</script>

现象：

• 初始显示：子组件：null

• 点击“异步加载”后，依然不变！

原因：

provide 只能在组件 setup() 执行时建立依赖关系，

异步调用 provide() 没有效果，Vue 根本不会重新建立依赖注入。

五、正确的异步写法总结

六、总结