Vue3 reactive 操作数组 响应性(数组变了,但页面显示没变)问题

问题代码:

tableTemplates: Array<HkTaskTemplateEntity> = reactive([]);

//删除方法的一部分 ,根据templateId删除数组数据
this.tableTemplates = this.tableTemplates.filter(item => templateId !== item.templateId);

删除后tableTemplates数组中对象减少,但vue页面显示数据条数无变化

原因:

Vue 2 在操作数组的时候，也可以和普通数组这样处理数据的变化，依然能够保持响应性，但在 Vue 3 ，如果使用 reactive 定义数组，则不能这么处理，必须只使用那些不会改变引用地址的操作。

解决方案:

1.将数组包在对象里,如

data=reactive(

{

tableTemplates:[]

});

2.使用ref,但是要注意 js里 使用 .value 操作值

参考文章:

单组件的编写 | Vue3 入门指南与实战案例