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

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 文档的详细信息：

注意解包仅适用于 top-level 属性 - 对引用的嵌套访问将不会解包：Read More

Answer 2

看起来你的代码有效：

const { onMounted, ref } = Vue
const app = Vue.createApp({
  setup() {
    const testVariable = ref(0);
    const socials = [{ value: testVariable, }];
    onMounted(() => {
      setTimeout(() => testVariable.value = 100, 1000);
    });
    return { socials, }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
   <div v-for="(social, index) in socials" :key="index">
     <p>{{ social.value }}</p>
   </div>
</div>

Answer 3

我最终使用了一种完全不同的方法。 Vuex 在处理这个问题时派上了用场 use-case.

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

Vue 3: Bind ref value to object property

ref

node.js

vue.js

vuejs3

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

Vue 3: Bind ref value to object property

ref

node.js

vue.js

vuejs3

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