Vue 3：将引用值绑定到对象属性

Question

我遇到了一个问题，我试图使用新的组合 API 将对象属性绑定到 Vue 中的

ref

。我希望模板在设置 ref 值后使用新值重新渲染，但我却得到了

RefImpl {}

。我该如何解决这个问题？

<template>
  <v-card>
   <v-card-text class="pa-2">
     <div v-for="(social, index) in socials" :key="index">
       <p>{{ social.value }}</p>
     </div>
   </v-card-text>
  </v-card>
</template>

<script>
import { onMounted, ref } from "@vue/composition-api/dist/vue-composition-api";

export default {
  setup() {
    const testVariable = ref(0);

    const socials = [
      {
        value: testVariable,
      }
    ];

    onMounted(() => {
      setTimeout(() => testVariable.value = 100, 1000);
    });

    return {
      socials,
    }
  },
}
</script>
<style scoped></style>

Answer 1

您的 socials 变量不会 unref 模板中的内部引用。基本上，您在模板中要做的就是使用

social.value.value

。所以我认为重命名该变量会更好，比如

   const socials = [
      {
        variable: testVariable,
      }
    ];

这样你就可以做到

social.variable.value

。

来自 Vue 文档的详细信息：

• 请注意，解包仅适用于顶级属性 - 对引用的嵌套访问将不会被解包：阅读更多