首页 > 其他分享 >【vue3】探讨为什么ref()换为reactive()数据不再是响应式?

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

时间:2024-08-29 15:52:12浏览次数:13  
标签:data 更新 tableData reactive let vue3 ref response

原问题:

本来想使用数组中的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);  
	    }  
		}

标签:data,更新,tableData,reactive,let,vue3,ref,response
From: https://blog.csdn.net/aaaa_aaab/article/details/141680449

相关文章

  • 在vue3中实现一个截图上传图片功能
    <template><divclass="avatar-container"><el-dialog:title="title":model-value="dialogVisibleCorpper"width="800px"append-to-body@opened="openDialog":before-clos......
  • 在Vue3应用中使用TypeScript的最佳实践
    随着Vue3的推出,TypeScript逐渐成为了前端开发中的一种必备技能。Vue3的设计更好地支持TypeScript,这使得开发者可以在开发过程中充分利用TypeScript的强类型系统,从而提高代码的可维护性和可读性。在这篇博客中,我们将深入探讨在Vue3应用中使用TypeScript的最佳实践,并通过示例......
  • Vue3实现excel文件预览和打印
    预览excel关于实现excel文档在线预览的做法,一种方式是通过讲文档里的数据处理成html,一种是将文档处理成图片进行预览。首先我们先讲一下实现html这种方式预览的。Excel预览用的是xlsx这个库。xlsxxlsx是一个优秀的表格处理库,是一款适用于浏览器和nodejs的开源电子表格解析库"......
  • vue3导入excel表格并展示(使用xlsx插件+vite+element-plus)/js上传表格(js+xlsx)
    第一步:下载两个库npminstallfile-saver--savenpminstallxlsx--save第二步:引入import{saveAs}from'file-saver'import*asXLSXfrom'xlsx'第三步:给组件设置点击事件<el-form-item@click="handleExport">导出</el-for......
  • 在Vue3中处理异步API调用并更新表单数据的方法示例
    在Vue3中,处理异步API调用并更新表单数据通常涉及到使用组合式API(CompositionAPI),它提供了一种更灵活的方式来组织组件逻辑。以下是使用Vue3的setup函数和reactive、ref等响应式API来处理异步API调用并更新表单数据的一个示例。首先,假设我们有一个表单,需要从API获取一些数据并填......
  • vue3导入excel表格并展示(使用xlsx插件+vite+element-plus)/js上传表格(js+xlsx)
    首先下载两个库npminstallxlsx--savenpminstallfile-saver--save然后在你需要导出的组件里引入库import{saveAs}from'file-saver'import*asXLSXfrom'xlsx'创建函数consthandleExport=()=>{letoneDimensionalArray=[]lettwoDimensionalArray......
  • Android经典实战之存储方案对比:SharedPreferences vs MMKV vs DataStore
    本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点在Android开发中,键值对存储(Key-ValueStorage)是一种经常用到的轻量级数据存储方案。它主要用于保存一些简单的配置数据或状态信息,例如用户设置、缓存数据等。常......
  • 深入理解DPO(Direct Preference Optimization)算法
    目录1.什么是DPO?2.Bradley-Terry模型2.1奖励模型的训练3.从PPO到DPO4.DPO的简单实现5.梯度分析Ref1.什么是DPO?直接偏好优化(DirectPreferenceOptimization,DPO)是一种不需要强化学习的对齐算法。由于去除了复杂的强化学习算法,DPO可以通过与有监督微调(SFT)相......
  • Vue3 变量响应基础
    在Vue3中有两种分别为选项式和组合式的操作,现在一般用组合式,很少用选项式的操作;1.计算,与变量;直接这样写的话,他不会进行计算,需要添加两个大括号;比如 {{1+1}}变量的话我们可以不用script中的因为里面是Vue2的我们可以改成如果不使用{{}}的话他显示的则会变......
  • vue3的 状态管理库
    1.vue的状态管理库vue常用的状态管理库有 vuex 和Pinia,两者的区别如下:架构设计‌:Vuex采用全局单例模式,通过一个store对象来管理所有的状态;而Pinia采用了分离模式,每个组件都拥有自己的store实例。模块设计:Vuex包含states、mutations、getters、actions、modules,mutat......