【vue3】探讨为什么ref()换为reactive()数据不再是响应式？

原问题：

本来想使用数组中的filter方法，原来用的是

let tableData = ref([])

然后发现Ref上不再filter属性，所以就换成了

let tableData = reactive([])

但是这样有了一个新问题就是：数据加载不出来了，代码如下

// 获取文章列表数据
	let tableData = reactive([])
	function getArt() {
		getArticles().then((response) => {
			tableData =response.data.data
			
		})
	}

原因：

试图使用 Vue 3 的 Composition API 来获取文章列表数据，并将这些数据更新到一个响应式引用 tableData 中。然而，更新方式 tableData = response.data.data 并不是响应式的，因为直接替换了 tableData 的引用，而不是更新它内部的数组。这会导致 Vue 无法追踪到 tableData 的变化，因此界面上不会更新显示新的数据。

解决方法：

// 获取文章列表数据
	let tableData = reactive([])
	async function getArt() {  
	    try {  
	        const response = await getArticles(); // 假设 getArticles() 返回一个 Promise  
	        // 更新 tableData 数组的内容，而不是替换它的引用  
	        tableData.splice(0, tableData.length, ...response.data.data);  
	        // 或者使用更简单的方法，如果不需要保留旧数据  
	        tableData = [...response.data.data]; // 但注意，这将不会触发响应性更新，因为你又替换了引用  
	         console.log(response.data.data);
	    } catch (error) {  
	        console.error('获取文章列表失败:', error);  
	    }  
		}