原代码如下：
<div class="section" v-for="(item, i) in historyAccount" :key="i" v-show="item.flag">
<span v-html="changeColor(item)"></span>
<img src="@/assets/images/login/clearUserName3x.svg" @click="removeItem(item)" />
</div>
//历史登录账号数据
let historyAccount = reactive([
{
phone: '18896722354',
flag: false
},
{
phone: '15056678907',
flag: false
}
])
//这里用filter方法删除所循环的historyAccount的值
function removeItem(item) {
console.log(item)
historyAccount = historyAccount.filter(ele => ele.phone !== item.phone)
console.log(historyAccount)
}此时removeItem方法运行，打印出historyAccount的值确实被改变了，但是页面还是没有变化
原因：
如果你直接通过赋值的方式改变
reactive对象引用的数组，是不会触发视图的更新的，应该使用 Vue 提供的响应式方法来更新响应式数据。文章来源：https://www.toymoban.com/news/detail-845694.html
改进：可以利用splice方法删除数组文章来源地址https://www.toymoban.com/news/detail-845694.html
function removeItem(item) {
const index = historyAccount.findIndex(ele => ele.phone == item.phone)
if (index !== -1) {
historyAccount.splice(index, 1)
}
console.log(historyAccount)
}到了这里，关于vue3 reactive包裹数组无法页面无法响应式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
