如果 Vue 3 引用是对象的属性，则它们的行为会有所不同

Question

使用 Vue 3 的 Composition API 时，我注意到模板内部的引用在作为对象的属性进行访问时的行为有所不同。我认为SFC Playground 中的这个示例最好地总结了这一点，但这里是关键代码（来自单个文件组件）：

    <script>
    import { ref } from 'vue';
    export default {
      setup() {
        const wut = ref(false);
        const obj = { wut };
        return {
          wut,
          obj,
        };
      },
    };
    </script>
    
    <template>
      <!-- obj.wut - false -->
      <h3>obj.wut - {{ obj.wut }}</h3>
      <!-- !!obj.wut - true -->
      <h3>!!obj.wut - {{ !!obj.wut }}</h3>
      <!-- obj.wut.value - false -->
      <h3>obj.wut.value - {{ obj.wut.value }}</h3>
      <!-- !!obj.wut.value - false -->
      <h3>!!obj.wut.value - {{ !!obj.wut.value }}</h3>
      <!-- does display -->
      <h3 v-if="obj.wut">display logic for this: v-if="obj.wut"</h3>
      <!-- does not display -->
      <h3 v-if="!obj.wut">display logic for this: v-if="!obj.wut"</h3>
      <!-- typeof obj.wut - object -->
      <h3>typeof obj.wut - {{ typeof obj.wut }}</h3>
    </template>

谁能解释为什么在某些情况下将 ref 视为对象并在其他情况下解释其值？这是一个错误，还是设计使然？

Answer 1

简短回答：这是设计使然。

长答案：

请查看Vue3 指南 -> 高级指南 -> 反应性 -> 反应性基础知识 -> 引用展开

参考解包

当 ref 作为渲染上下文（从 setup() 返回的对象）上的属性返回并在模板中访问时，它会自动浅层解包内部值。.value模板中仅需要嵌套引用：

在您的示例模板中，obj.wut是一个 ref 对象，wut是一个未包装的原始值（布尔值）

附加功能：

1. 在您的示例中，obj.wut呈现为false页面中的样子，似乎它无需.value. 这是因为 vue 中有一个toDisplayString函数，它接受 ref 对象 ( obj.wut)，它对JSON.stringifyref 对象的内部值进行操作。wut如果的值为a string( const wut = ref('a string');)，您将在渲染页面中看到额外的双引号，例如"a string"
2. 文档中还有另一个提示，您可以将对象包装在reactive( const obj = reactive({ wut })) 中以访问模板中未包装的值。