vue3注意事项

1、ref响应式数据的改动需要通过 .value赋值

reactive定义的数据 数组则只能通过使用数组的方法来更替。

2、vue3不再支持filter数据过滤,但更接近react,所以可以使用

复制代码
//c.count需要过滤的数据
<text class="trolley-count">{{trolleyCount(c.count)}}</text>

const trolleyCount = (_count:number) =>{
	if(_count === 0){
		return 0
	}else if(_count<100){
		return _count
	}else{
		return '99+'
	}
}

3、vue3不适合使用this,所以refs也没办法this.$refs,但是可以使用ref(vue3非vue2的)创建一个NULL的绑定数据

复制代码
<div ref="popup"></div>


const popup = ref(null);

4、props接收参数的方式也改为了defineProps

复制代码
import { defineProps} from 'vue'
	const props = defineProps({
		id:{
			type:String,
			default: '0'
		}
	})
相关推荐
天才熊猫君几秒前
Flex布局深度解析:为什么我的Flex项目不按预期收缩?
前端
风雪心1 分钟前
Antd组件库Form的onValuesChange和getFieldsValue的调用时机分析
前端
Moment2 分钟前
2026 趋势预测:Vibe Coding 之后,人人都会拥有专属 Agent 吗?
前端·javascript·后端
前端Hardy18 分钟前
Bun 1.0 正式发布:JavaScript 运行时的新王者?启动快 5 倍,打包小 90%!
前端·javascript·面试
Bigger28 分钟前
从 Grunt 到 Vite:前端构建工具十几年的演化
前端·vite·前端工程化
IT_陈寒29 分钟前
Python 性能提升50%的5个魔法技巧,90%的人还不知道!
前端·人工智能·后端
前端Hardy29 分钟前
别再乱写正则了!一行 regex 可能让你的网站瘫痪 10 分钟
前端·javascript·面试
gyx_这个杀手不太冷静1 小时前
OpenCode 进阶使用指南(第二章:Skills 系统)
前端·ai编程
牛奶1 小时前
浏览器到底在偷偷帮你做什么?——HTTP缓存与刷新机制
前端·http·浏览器
CodeSheep1 小时前
“渐渐能理解为何不愿意雇佣35岁以上程序猿。去年换了份工作,组里4位组员其中3位40+,发现其实最大的问题并不是说精力不济卷不动”
前端·后端·程序员