vue3 中reative 值为数组时如何重新赋值

<template >
    <div>
        <h1>test11111111</h1>
        <h3 v-for="(name,index) in tableData" :key="index">{{ name }}</h3>
        <button @click="test">test</button>
        <button @click="test2">test2</button>

    <br/>
        <h3 v-for="(name,index) in tableDataObj.listobj" :key="index">{{ name }}</h3>

        <button @click="test3">test3</button>
        
    </div>
    
</template>

<script setup>
import { ref, reactive } from 'vue'

const tableData = reactive([]);
//const tableData = reactive<any>([]);
const tableDataObj = reactive({listobj:[]});


function test()
{
    tableData.push({"name":"test1"}); //方式可以
}

function test2()
{
    tableData.length = 0; //重置
    let list = [{name:"test2"}];
    //tableData = list; //方式不行
    tableData.push(...list); //方式可以
}

function test3()
{
    let list = [{name:"test3"}];
    tableDataObj.listobj = list;
    tableDataObj.listobj.push({name:"test4"});; 
}


</script>

采用这种方式const tableData = reactive([]);定义的时候，不能直接赋值，这样的话就不能响应。需要利用push的方式。

const tableDataObj = reactive({listobj:[]}); 这中定义的可以直接赋值即可
 

参考

Vue3实践指南：使用reactive函数声明数组如何正确赋值响应式、script setup语法糖中toRefs如何优雅呈现、Options API 与 Composition API 如何选择及混用是否对性能有影响、关于 setup 中没有 this 的问题及 setup 的执行时机 - 古兰精 - 博客园 (cnblogs.com)