Vue 3 甚至更新了 toRaw 对象？答案

【问题标题】：Vue 3 updates even a toRaw object?Vue 3 甚至更新了 toRaw 对象？
【发布时间】：2021-05-31 10:46:18
【问题描述】：

所以我在组件的设置功能中有这个来做备份，以防有人取消编辑：

const backupPoll = toRaw(props.poll);

在mounted() 中，我执行以下操作以获取可编辑投票的本地可编辑版本

this.title = this.poll.title;
this.question = this.poll.question;
this.timer = this.poll.timer;
this.options = this.poll.options;

这在大多数情况下都有效，如果我取消除选项之外的所有重置。这些保持编辑状态。

这是选项的 html 和添加部分：

<div class='option' v-for='(option, index) in options' :key='index'>
    <label class='option-label' :for='"option-" + index'>option {{ index + 1 }}</label>
    <base-button @click.prevent='removeOption(index)' v-if='index > 1' size='small' design='outline'>REMOVE</base-button>
    <input class='option-input' type="text" :name='"option-" + index' v-model='options[index]'>
</div>
<div class='button-bar'>
    <base-button @click.prevent='addOption'>+ OPTION</base-button>
    <div class='spacer'></div>
    <base-button @click.prevent='cancelPoll' class='button-right'>CANCEL</base-button>
    <base-button @click.prevent='savePoll' class='button-right' design='dark'>SAVE</base-button>
    <base-button @click.prevent='publishPoll' class='button-right' design='outline-dark'>PUBLISH</base-button>
</div>

以及用于更新它们的函数：

removeOption(index) {
    this.options.splice(index, 1);
},
addOption() {
    console.log(this.backupOptions);
    this.options.push('');
    console.log(this.backupOptions);
},

取消通话时：

resetPoll() {
    const backupPoll = this.backupPoll;
    console.log(this.backupPoll);
    // this.$store.dispatch('polls/receivePollUpdate', this.backupPoll);
    this.title = backupPoll.title;
    this.question = backupPoll.question;
    this.timer = backupPoll.timer;
    this.options = backupPoll.options;
},

这适用于除选项数组之外的所有内容。

有什么想法吗？

【问题讨论】：

标签： vue.js vuejs3

【解决方案1】：

JavaScript 对象和数组是copied by reference。

toRaw() 只是返回原始对象，所以backupPoll 指向与原始对象相同的对象。在this.options = this.poll.options 中，您只是在复制对同一数组的引用。因此，backupPoll.options、this.options 和 this.poll.options 都是同一个引用。

一种解决方案是将this.poll.options[] 复制到一个新数组中（使用spread syntax）：

this.options = [...this.poll.options];

【讨论】：