这是一个创建于 590 天前的主题，其中的信息可能已经有所发展或是发生改变。
请教一个 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 的对象是一个新的引用地址。
|
|
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