vue3 - Vue3中computed返回的ref对象为何在provide/inject后无需.value访问？

Question

vue3文档中写明computed返回一个ref对象，但是通过provide/inject后，不需要通过.value就能直接访问，请问这是在哪里触发了解包？

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

export default {
  components: { Child },
  data() {
    return {
      message: 'hello'
    }
  },
  provide() {
    return {
      message: computed(() => this.message)
    }
  }
}
</script>

<template>
  <input v-model="message">
  <Child />
</template>

<script>
import {ref,computed} from "vue"
export default {
  inject: ['message'],
  methods:{
    test()
    {
     console.log(this.message) //hello
     console.log(this.message.value)//undefined
    }
  }
}
</script>

<template>
  <p>
    Message to grand child: {{ message }}
  </p>
  <button @click="test">111</button>
</template>

Answer 1

你使用的是 选项式 API。他的响应式数据是基于 Proxy 来实现的。也就是说和 rective() 是一样的，也就不需要使用 .value。

• #响应式代理 vs. 原始值 - 响应式基础 | Vue.js
• #Vue 中的响应性是如何工作的 - 深入响应式系统 | Vue.js

即使抛开问题中的 computed 和 provide/inject， 你在生命周期函数和 methods 中也是不需要写 .value 的。

export default {
  data() {
    return {
      count: 1
    }
  },

  mounted() {
    console.log(this.count) // => 1
    this.count = 2
  },

  methods: {
    increment() {
      this.count++
    }
  },
}

---

需要注意的一点就是在使用 setup （不是 <script setup>）时，如果在其他的组合式API中使用 setup 中的变量也不需要添加 .value。直接使用 this.xxx 即可，Vue 会自动解包（应该是出于一致性的考虑）。

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}

---

在模板中访问从 setup 返回的 ref 时，它会自动浅层解包，因此你无须再在模板中为它写 .value。当通过 this 访问时也会同样如此解包。

• 组合式 API：setup() | Vue.js

---

你改成组合式就会发现 provide/inject 注入进来的东西，你在使用的时候还是需要写 .value 的

�� Vue SFC Playground

<!-- App.vue -->
<script setup>
import { ref, provide  } from 'vue'
import Comp from './Comp.vue'

const msg = ref('Hello World!')
provide('msg', msg)
</script>

<template>
  <Comp />
</template>

<!-- Comp.vue -->
<script setup>
import { inject } from 'vue'

const msg = inject('msg')

console.log('msg =>', msg) // msg  => Object { ...
console.log('msg.value =>', msg.value)// msg.value => Hello World!
</script>

<template>
  <div>
    {{ msg }}
  </div>
</template>

Answer 2

在 Vue 3 中，当你使用 computed 时，它确实返回一个 Ref 对象，这意味着正常情况下你需要通过 .value 来访问其值（例如在 Composition API 的 setup 函数中）。但在通过 provide/inject 机制后，子组件中使用 inject: ['...'] 选项注入的值会自动触发 "解包"，从而不需要通过 .value 访问。这个解包行为主要发生在 组件初始化过程中的属性注入阶段（具体来说，在 Vue 的运行时处理 inject 选项时）。

为什么在子组件中不需要 .value？

• 解包触发的具体位置：Vue 在将注入属性绑定到子组件实例（this）时，会自动检查注入值是否为 Ref 对象。如果是，Vue 会应用 unref 操作（即 value = isRef(value) ? value.value : value）来解包值。这发生在 Vue 的 applyOptions 阶段（内部实现），当设置 inject 选项的值到组件上下文中时。

  • 在 Vue 3 源代码中（例如 runtime-core/src/componentOptions.ts），处理 inject 选项时会调用解包逻辑：每个注入的属性都会被转换为一个访问器 getter，当访问 this.injectedProperty 时，会返回 unref(injectedValue)。

• 行为解释：

  • 在你提供的父组件中，provide() 返回 { message: computed(() => this.message) }。这里的 computed() 返回一个计算 Ref 对象。
  • 在子组件中，inject: ['message'] 将这个值注入到组件实例。但在方法 test() 中，this.message 直接返回字符串 'hello'（解包后的值），而 this.message.value 为 undefined，因为 this.message 已被解包成一个原始值（字符串），不再是 Ref 对象。
• 为什么设计如此？ Vue 在 inject 选项中自动解包 Ref，是为了保持一致性：inject 选项会将值作为组件的反应式属性处理（类似于 data 或 props），在 this 上下文中，它们应该是可直接访问的值（类似于模板自动解包的行为）。这简化了 Options API 的使用，避免了不必要的 .value 操作。

关键点：解包仅在 inject 选项上下文中发生

• 这个行为是 inject 选项特有的。如果你使用 Composition API 的 inject() 函数（例如在 setup() 中），结果会不同：

  import { inject } from 'vue'
  export default {
    setup() {
      const message = inject('message') // 这里是 Ref 对象，需要 .value 访问
      console.log(message.value) // 正确输出 'hello'
    }
  }

  因为在 setup() 中，inject() 直接返回原值（包含可能的 Ref），你需要手动处理 .value。

• Vue 3 文档（Options API: Inject）明确说明：如果注入的值是一个 Ref，它会被自动解包（"injected values are automatically unwrapped if they are refs"），因此无需 .value。

为什么提供时是 Ref，注入后就不是？

在你代码中：

• 父组件的 provide() 提供的是一个计算 Ref：computed(() => this.message)。这是反应式的值。
• 子组件注入后，Vue 内部在设置 this.message 时应用了 unref，所以 this.message 成为原始值（这里是字符串 'hello'）。
• 解包后，值仍然是反应式的：如果父组件的 message 改变（通过 v-model），这个变化会通过计算属性传播到子组件，并更新视图（因为解包后的值保留了反应式性）。

当需要访问原始 Ref 时怎么办？

如果某些场景确实需要访问原始 Ref（例如在子组件中操作 .value），你应该避免使用 inject 选项，改用 Composition API：

export default {
  setup() {
    const message = inject('message') // 这里是 Ref，需要 .value
    const handleClick = () => {
      console.log(message.value) // 正确访问 Ref 值
    }
    return { handleClick }
  }
}

总之，computed 返回的 Ref 在 provide/inject 后无需 .value 访问，是因为 Vue 在 inject 选项的处理阶段自动解包了所有注入的 Ref 值。这个行为是为了在 Options API 中提供一致的开发体验。