vue3 使用reactive定义变量时,会出现数据变化,页面未更新渲染,具体情况如下:

import { reactive } from 'vue';
const testObject = reactive({
	show:false,
	titleL:'这里是标题!'
});

const clickHandle = (e)=>{
	testObject.show = e.traget.checked;
}
<template>
	<a-checkbox
        v-model="localValue.show"
        @change="clickHandle ($event)"
      >
        显示一下吧 -- {{ localValue.show }}
    </a-checkbox>
    <div v-show='testObject.show'></div>
</template>

如果你使用的是以上写法,就会神奇的发现:

他喵的,竟然发现,最后两种方案处理以上问题。。。

方案1

将reactive更改为ref,问题就迎刃而解!

方案2

将这里
const testObject = reactive({
	show:false,
	titleL:'这里是标题!'
});
改为
const testObject = reactive({
	aa:{
		show:false,
		titleL:'这里是标题!'
	}
});

赋值操作改为:

const clickHandle = (e)=>{
	testObject.aa.show = e.traget.checked;
}

其实就这么简单解决了,下图为最终效果:

在这里插入图片描述
在这里插入图片描述

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐