vue3.0中reactive的正确使用姿势
场景
在项目开发的时候,前端肯定是先写静态页面
在静态页面写好之后
然后就可以与后端对接数据了【高兴】
但是在对接接口的时候
我们会发现后端返回来的字段与前端在页面上写的可能不一致
这个时候有意思的事情就发生了
这种情况数据是不会跟新的
<div>
{{ objData }}
<button @click="submitHander">改变数据</button>
</div>
<script>
import { reactive } from 'vue'
export default {
setup () {
let objData=reactive({
name:'林漾',
age:31,
sex:'女'
})
//这样的方式跟新失败
function submitHander(){
objData={
name:'林漾1',
age:31,
sex:'女nv'
}
}
return {
objData,
submitHander
}
}
}
</script>
发生的现象
想必各位都发现, 点击按钮的时候,
数据始终没有发生改变
为什么数据没有发生改变了?
因为我点击的时候是这样操作的
objData={
name:'林漾1',
age:31,
sex:'女nv'
}
我是重新赋值的。如果你赋值是整个对象,vue3.0是无法跟新的
如何要跟新怎么处理
这样可以跟新
<template>
<div>
{{ objData }}
<button @click="submitHander">改变数据</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup () {
let objData=reactive({
name:'林漾',
age:31,
sex:'女'
})
function submitHander(){
objData.name='林漾1';
objData.name='31';
objData.name='女nv';
}
return {
objData,
submitHander
}
}
}
</script>
上面跟新遇见的问题
如何有很多值。如果需要我去跟新,
那岂不是我要一个一个的去参与赋值,
这样的话岂不是要把我累死???【妈呀!接受不了】
也有办法去解决:如何处理呢??
其实上面reactive的是使用方式都错了。真的错了,我骗你
reactive 如何正确去跟新
<template>
<div>
{{ objData.arr }}
<button @click="submitHander">改变数据</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup () {
let objData=reactive({
// reactive下面应该放置一个属性值
arr:[
{
name:'林漾',
age:31,
sex:'女'
}
]
});
function submitHander(){
objData.arr=[
{ name:'余声声',
age:29,
sex:'女'
}
]
}
return {
objData,
submitHander
}
}
}
</script>
reactive 正确使用姿势
reactive函数传递的参数必须是对象(json/arr)
千万不要这样写
let objData=reactive({ name:'林漾', age:31, sex:'女' })
这样写是非常的不好的。
有的小伙伴可能会说:
上面reactive函数传递的参数是对象呀
有什么问题了???
问题是在我们跟新数据的时候一点都不友好
还有就是我们在实际开发过程中可能有好几处都是响应式的数据
这个时候我们只需要创建一个reactive
就说按照下面这样来处理
let objData=reactive({
// 某一个区域使用的数据
oneObj:[
{
name:'林漾',
age:31,
sex:'女'
}
],
// 另一个区域使用的数据
two:{
name:'余声声',
age:123
}
});
不推荐这样使用
let oneObj=reactive({
name:'林漾',
age:31,
sex:'女'
})
let two=reactive({
name:'余声声',
age:123
})
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 用 C# 插值字符串处理器写一个 sscanf
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!