vue3中的reactive赋值问题

问题

当通过方法对reactive变量修改的时候,发现页面上的值没有及时更新?

解决方法

具体原因: 上面这样赋值检测不到,因为响应式的是它的属性,而不是它自身.

方法1: 单个赋值

如下:

bash 复制代码
let obj = reactive({
	name: 'zhangsan',
	age: '18'
})

某个方法(){
	obj.name = "123";	
}

方法2: 再套一层属性

如下:

bash 复制代码
let obj = reactive({
	data: {
		name: 'zhangsan',
		age: '18'
	}
})

某个方法(){
	obj.data= {
		name: 'zhangsan',
		age: '18'
	}	
}
相关推荐
阿珊和她的猫3 分钟前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo12 分钟前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li44 分钟前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐1 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586541 小时前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊2 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表2 小时前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子3 小时前
Next.js 入门指南
开发语言·javascript·next.js
罚时大师月色3 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
漂流瓶jz3 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化