项目场景：

---

问题描述

起初想学习一下ref 和 reactive 用法，做了一个如上图所示发表论文和删除的小功能，发现个问题，在用 reactive 定义数据处理时，数据更新页面不更新

function delBtn(idx) {
  cenLs = cenLs.filter((item, index) => index !== idx);
  console.log("删除后数据 ------ start", cenLs);
}

---

原因分析：

是因为用 filter() 函数处理数据时返回一个新数组赋值给了 cenLs 。reactive 声明的响应式对象被 cenLs 代理，操作代理对象需要有代理对象的前缀，此时的新数组直接把值赋值给了 cenLs ，使得 cenLs 失去了响应式。在 vue3 使用 proxy ，对于对象或数组都不能直接将整个数据赋值。最终打印数据发现，数据类型别改变了

---

解决方案：

方式一：使用map来处理数据

方式二：使用 ref 来定义响应式数据监听，filter() 函数处理完数据时返回新数组赋值定义 cenLs.value值中，并没有改变定义 cenLs 的响应类型

总结

PS：使用 ref() 来定义基本类型数据等同于 reactive() 声明 对象类型数据，例如：

  	ref("我爱学习") == reactive({value: "我爱学习"})

以上就是该功能的内容，如果有不对之处或者有不懂，可以留言指出改正，谢谢！！！