这是一个创建于 877 天前的主题，其中的信息可能已经有所发展或是发生改变。
请教一个 vue3 的问题
<script setup> import { ref,reactive,toRaw } from 'vue' const msg = ref('Hello World!') const form = reactive({ name: '', items: [], }) let formItem = reactive({ id: 0, intro: '' }) const OnAdditem= ()=>{ // form.items.push(formItem) form.items.push(toRaw(formItem)) //form.items.push({ // id:0, //intro: '' //}) } </script> <template> <button @click="onAdditem"> add </button> <div v-for="(item,index) in form.items" :key="index"> <br> <input v-model="item.id"><br> <input v-model="item.intro"><br> </div> </template> 执行onAdditem方法时好像不能使用之前定义的 formItem,要不然添加数组里面的数据好像都是指向同一条 item 数据
 | 1 doommm 2023-05-17 16:45:00 +08:00 迷惑操作？不是应该每次都 push 一条新的 formItem 数据进去吗？ ``` form.items.push(createFormItem()); ``` |
 | 2 drinke9 OP |
 | 4 vivipure 2023-05-17 16:55:39 +08:00 和楼上一样，直接通过函数创建一个非响应式的数据即可，通过 toRaw 来转换，只会将响应式里面的原始数据 push 进去，导致引用一样。 |
 | 5 cityeys 2023-05-17 17:01:20 +08:00 @drinke9 按照你这个思路，可以这么操作：form.items.push(toRaw(Object.assign({}, formItem)))，要保证 push 的对象是一个新的引用地址。 |
| span class="no">6 drinke9 OP 不想 push 的时候还需要写一次 item 的结构，所以直接 push 定义的 item 。 刚刚在 discord 找到了一个解决办法 form.items.push({...formItem}) https://discordapp.com/channels/325477692906536972/568340117052456970/1108316781501763646 |
 | 7 Imindzzz 2023-05-17 17:17:26 +08:00 via Android 首先一个问题，formItem 没有参与到页面渲染，你为什么要定义成响应式。参与页面的只是 form 其次，toraw 是返回原始对象，不是返回一个和原始对象一样的新对象，那每次返回的当然是同一个对象 |
 | 8 hua123s 2023-05-17 17:31:58 +08:00 应该用方法创建更合适，解构如果结构深同样会导致你遇到的引用问题 const newFormItem = () => { return { id: 0, intro: '' } } |
 | 9 kamilic 2023-05-17 17:44:25 +08:00 仅限全部都是值复制的情况 form.items = [...form.items, {...formItem}]; |
 | 10 GreatAuk 2023-05-18 00:30:53 +08:00 js 基础学好再用 vue |
 | 11 ivslyyy 2023-05-18 01:43:05 +08:00 parse stringify |
 | 12 wangtian2020 2023-05-18 08:46:06 +08:00 我写 script setup 语法时，只用 ref ，reactive 一次都不用。在 setup 语法中 reactive 不是必须的。用 ref.value 你能更清晰的明白自己在更新的是什么值 |
 | 13 alleluya 2023-05-18 10:29:57 +08:00 @wangtian2020 确实 reactive 有时候不容易让人区分到底是响应式变量还是普通变量 |
 | 14 M003 2023-05-18 11:26:42 +08:00 内存地址一样,要不就用 { ...formItem }, 要不就 JSON.parse(JSON.stringify(formItem)). 我一般 push 定义好的对象 用 `lodash` 的 `cloneDeep` |
Select Language