V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
drinke9
V2EX  ›  Vue.js

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

  •  
  •   drinke9 · 316 天前 · 2105 次点击
    这是一个创建于 316 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    14 条回复    2023-05-18 11:26:42 +08:00
    doommm
        1
    doommm  
       316 天前
    迷惑操作?不是应该每次都 push 一条新的 formItem 数据进去吗?
    ```
    form.items.push(createFormItem());
    ```
    drinke9
        2
    drinke9  
    OP
       316 天前
    @doommm

    ```js
    let formItem = reactive({
    id: 0,
    intro: ''
    })
    ```
    这个每次不是 push 新的一个吗?
    doommm
        3
    doommm  
       316 天前
    @drinke9 不是啊,为什么会认为它每次 push 都会是一个新的?
    vivipure
        4
    vivipure  
       316 天前
    和楼上一样,直接通过函数创建一个非响应式的数据即可,通过 toRaw 来转换,只会将响应式里面的原始数据 push 进去,导致引用一样。
    cityeys
        5
    cityeys  
       316 天前
    @drinke9 按照你这个思路,可以这么操作:form.items.push(toRaw(Object.assign({}, formItem))),要保证 push 的对象是一个新的引用地址。
    drinke9
        6
    drinke9  
    OP
       316 天前
    不想 push 的时候还需要写一次 item 的结构,所以直接 push 定义的 item 。
    刚刚在 discord 找到了一个解决办法 form.items.push({...formItem})

    https://discordapp.com/channels/325477692906536972/568340117052456970/1108316781501763646
    Imindzzz
        7
    Imindzzz  
       316 天前 via Android
    首先一个问题,formItem 没有参与到页面渲染,你为什么要定义成响应式。参与页面的只是 form

    其次,toraw 是返回原始对象,不是返回一个和原始对象一样的新对象,那每次返回的当然是同一个对象
    hua123s
        8
    hua123s  
       316 天前
    应该用方法创建更合适,解构如果结构深同样会导致你遇到的引用问题
    const newFormItem = () => {
    return {
    id: 0,
    intro: ''
    }
    }
    kamilic
        9
    kamilic  
       316 天前
    仅限全部都是值复制的情况

    form.items = [...form.items, {...formItem}];
    GreatAuk
        10
    GreatAuk  
       316 天前
    js 基础学好再用 vue
    ivslyyy
        11
    ivslyyy  
       316 天前
    parse stringify
    wangtian2020
        12
    wangtian2020  
       315 天前
    我写 script setup 语法时,只用 ref ,reactive 一次都不用。在 setup 语法中 reactive 不是必须的。用 ref.value 你能更清晰的明白自己在更新的是什么值
    alleluya
        13
    alleluya  
       315 天前
    @wangtian2020 确实 reactive 有时候不容易让人区分到底是响应式变量还是普通变量
    M003
        14
    M003  
       315 天前
    内存地址一样,要不就用 { ...formItem },

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

    我一般 push 定义好的对象 用 `lodash` 的 `cloneDeep`
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2943 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 00:31 · PVG 08:31 · LAX 17:31 · JFK 20:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.