<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:[]}); 这中定义的可以直接赋值即可
参考文章来源：https://www.toymoban.com/news/detail-689470.html
Vue3实践指南：使用reactive函数声明数组如何正确赋值响应式、script setup语法糖中toRefs如何优雅呈现、Options API 与 Composition API 如何选择及混用是否对性能有影响、关于 setup 中没有 this 的问题及 setup 的执行时机 - 古兰精 - 博客园 (cnblogs.com)文章来源地址https://www.toymoban.com/news/detail-689470.html
到了这里，关于vue3 中reative 值为数组时如何重新赋值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
