Vue3 数组添加数据的时候如何取消响应式？

[drinke9]

请教一个 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>

play.vuejs.org

执行onAdditem方法时好像不能使用之前定义的 formItem,要不然添加数组里面的数据好像都是指向同一条 item 数据

[doommm]

迷惑操作？不是应该每次都 push 一条新的 formItem 数据进去吗？
```
form.items.push(createFormItem());
```

[drinke9]

@doommm

```js
let formItem = reactive({
id: 0,
intro: ''
})
```
这个每次不是 push 新的一个吗？

[doommm]

@drinke9 不是啊，为什么会认为它每次 push 都会是一个新的？

[vivipure]

和楼上一样，直接通过函数创建一个非响应式的数据即可，通过 toRaw 来转换，只会将响应式里面的原始数据 push 进去，导致引用一样。

[cityeys]

@drinke9 按照你这个思路，可以这么操作：form.items.push(toRaw(Object.assign({}, formItem)))，要保证 push 的对象是一个新的引用地址。

[drinke9]

不想 push 的时候还需要写一次 item 的结构，所以直接 push 定义的 item 。
刚刚在 discord 找到了一个解决办法 form.items.push({...formItem})

https://discordapp.com/channels/325477692906536972/568340117052456970/1108316781501763646

[Imindzzz]

首先一个问题，formItem 没有参与到页面渲染，你为什么要定义成响应式。参与页面的只是 form

其次，toraw 是返回原始对象，不是返回一个和原始对象一样的新对象，那每次返回的当然是同一个对象

[hua123s]

应该用方法创建更合适，解构如果结构深同样会导致你遇到的引用问题
const newFormItem = () => {
return {
id: 0,
intro: ''
}
}

[kamilic]

仅限全部都是值复制的情况

form.items = [...form.items, {...formItem}];

[GreatAuk]

js 基础学好再用 vue

[ivslyyy]

parse stringify

[wangtian2020]

我写 script setup 语法时，只用 ref ，reactive 一次都不用。在 setup 语法中 reactive 不是必须的。用 ref.value 你能更清晰的明白自己在更新的是什么值

[alleluya]

@wangtian2020 确实 reactive 有时候不容易让人区分到底是响应式变量还是普通变量

[M003]

内存地址一样,要不就用 { ...formItem },

要不就 JSON.parse(JSON.stringify(formItem)).

我一般 push 定义好的对象 用 `lodash` 的 `cloneDeep`