问题描述
我对 toRaw() 的反应性感到困惑。
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<TheForm @newThing="addNewThing" />
<TheList :allTheThings="allTheThings" />
</template>
<script setup>
import TheForm from "./components/TheForm.vue";
import TheList from "./components/TheList.vue";
import { ref } from "vue";
const allTheThings = ref([]);
const addNewThing = (thing) => allTheThings.value.push(thing);
</script>
TheForm.vue
<template>
<h3>Add New Thing</h3>
<form @submit.prevent="addNewThing">
<input type="text" placeholder="description" v-model="thing.desc" />
<input type="number" placeholder="number" v-model="thing.number" />
<button type="submit">Add New Thing</button>
</form>
</template>
<script setup>
import { reactive,defineEmit,toRaw } from "vue";
const emit = defineEmit(["newThing"]);
const thing = reactive({
desc: "",number: 0,});
const addNewThing = () => emit("newThing",thing);
</script>
TheList.vue
<template>
<h3>The List</h3>
<ol>
<li v-for="(thing,idx) in allTheThings" :key="idx">
{{ thing.desc }} || {{ thing.number }}
</li>
</ol>
</template>
<script setup>
import { defineProps } from "vue";
defineProps({
allTheThings: Array,});
</script>
由于代码将代理传递给数据,所以它的行为很可疑:提交表单后,如果您重新编辑表单字段中的数据,它也会编辑列表的输出。很好。
所以我想在 thing
中传入一个非反应式的 addNewThing
副本:
const addNewThing = () => {
const clone = { ...thing };
emit("newThing",clone);
};
它按预期工作。
如果我用 const clone = toRaw(thing);
来代替的话,那是行不通的。
如果我记录每个输出,{ …thing}
与 toRaw(thing)
完全相同,那么为什么 toRaw()
似乎没有失去它的反应性?
任何照耀出来的光都会……很有启发性。
解决方法
我认为问题在于对 toRaw
的作用存在误解。
返回 reactive
或 readonly
代理的原始原始对象。 这是一个逃生舱口,可用于临时读取而不会产生代理访问/跟踪开销或写入而不会触发更改。不建议持有对原始对象的持久引用。谨慎使用。
toRaw
将返回原始代理,而不是代理内容的副本,因此您使用 const clone = { ...thing };
的解决方案恕我直言是合适的,希望这个解释就足够了。
查看类似问题了解更多细节? vue3 reactive unexpected behaviour