Reactive 踩坑

vue 响应式踩坑

复制代码
let questionInfo = reactive([ , ])   

api.getQuestions( id ).then(function (response){
	// 这里用法有问题
	questionInfo = response.data.data.questions;
	concole.log(questionInfo)
})

响应式数据本身是个函数,(不然咋帮你动态变化页面

上面例子里响应式数据已被重新赋值

本身已改变了 ,就相当于人家不是男的了,咋帮你干其他活。

正确使用

复制代码
let questionInfo = reactive ( {  arr :  []   ,  two : {}  }) 
// 需要响应式改变时
questionInfo.arr =   ........... ;
// 至此,就能看到页面动态变化了 

关于响应式数据底层的实现,我不大清楚,爱莫能助。

复制代码
// 两种响应式简单食用
let a =  reactive({arr :  [ 0 ,1 ] })
let b =  ref(0)

a.arr = [11234,1341234];
b.value = 1;
相关推荐
lijun_xiao20098 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
爱喝白开水a8 小时前
LangChain 基础系列之 Prompt 工程详解:从设计原理到实战模板_langchain prompt
开发语言·数据库·人工智能·python·langchain·prompt·知识图谱
Neverfadeaway8 小时前
【C语言】深入理解函数指针数组应用(4)
c语言·开发语言·算法·回调函数·转移表·c语言实现计算器
90后的晨仔8 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
武子康8 小时前
Java-152 深入浅出 MongoDB 索引详解 从 MongoDB B-树 到 MySQL B+树 索引机制、数据结构与应用场景的全面对比分析
java·开发语言·数据库·sql·mongodb·性能优化·nosql
杰克尼8 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder8 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔8 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔9 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀9 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js