【vue3】setup中数组数据变化页面不渲染

前言

此时用到的版本是vue: 3.2.13，目前已修复此问题。——2023.3.24 修改

【错误示范】

<template>
	<div>
		<button @click="changeArr">删除数组第一个元素</button>
		<div v-for="item in arr"></div>
	</div>
</template>
<script setup>
import {reactive} from 'vue;
let arr=reactive([{name:'123',value:'123'},{name:'456',value:'456'}]);

let changeArr=()=>{
	arr.splice(0,1)
}
</script>

点击按钮后，数组发生了变化，但是页面不渲染。这是因为不能直接对reactive数组操作

【正确示范】

<template>
	<div>
		<button @click="changeArr">删除数组第一个元素</button>
		<div v-for="item in arr.list"></div>
	</div>
</template>
<script setup>
import {reactive} from 'vue;
let arr=reactive({
	name:'列表',
	list:[{name:'123',value:'123'},{name:'456',value:'456'}]
});

let changeArr=()=>{
	arr.list.splice(0,1);
}
</script>

点击按钮后，数组发生变化，页面重新渲染。