Vue 3 Composition API 中的反应性对象未使用 @click 事件更新答案

【问题标题】：Reactive object in Vue 3 Composition API not updating with a @click eventVue 3 Composition API 中的反应性对象未使用 @click 事件更新
【发布时间】：2021-08-25 23:30:27
【问题描述】：

在使用和更新反应性对象时，我似乎遗漏了 Vue Composition API 的一些东西。

请看下面的代码。我希望单击事件在添加颜色时更新模板中的{{colors}} 输出。

<template>
  <div>
    <!-- {{colors}} Is not updated in the DOM on click event -->
    <pre>{{ colors }}</pre>
    <button @click="addColor">add color</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    let colors = reactive({ green: '#ccc000' });

    function addColor() {
      // By cloning and creating a new merged object
      colors = Object.assign({}, colors, { red: '#fff000' });
      // Or by changing the object directly
      colors.orange = '#322332'; // Also does not work
      console.log(colors); // Logs out the correct value
    }

    return {
      colors,
      addColor,
    };
  },
};
</script>

我可以在控制台日志中看到颜色的值正在更新，但在 DOM 中没有。

这里是代码的代码沙箱

https://codesandbox.io/s/mystifying-roentgen-rox9k?file=/src/App.vue

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api vue-reactivity

【解决方案1】：

你可能不应该创建一个新对象：

colors = Object.assign({}, colors, { red: '#fff000' });

相反，尝试操纵现有对象：

delete colors.green;
colors.red = '#fff000';

【讨论】：

我实际上更早地更新了我的示例，准确地显示了您的建议，因为它也不起作用。编辑：我删除了对象分配行，它可以工作
而不是colors = Object.assign()，不是另外的。
@AndyJamesN 您已将反应式代理替换为普通对象。这就是为什么当你直接操作它时它没有反应。
顺便说一句，colors = Object.assign... 的更酷的语法是 colors = { ...colors, red: '#fff000' } :)
我要做的解决方法是使用 Vuex 商店。这将允许我根据需要编辑我的主要颜色对象（实际上它比颜色复杂得多），并使用计算来保持事物的反应性。感谢所有反馈。

【解决方案2】：

你的颜色对象和函数应该是这样的

 const colors = reactive({ green: "#ccc000" });
    function addColor() {
      colors.green = "rgb(23, 117, 109)";
    }

不要忘记从设置中返回颜色和添加颜色

在你的模板中添加

<pre>{{ colors.green }}</pre>
    <button @click="addColor">add color</button>

这应该可以工作

【讨论】：