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'
		}
	})
相关推荐
夕阳_醉了9 分钟前
前端通用组件开发全指南|从 0 到 1 打造稳定可复用的业务组件
前端
Amos_Web14 分钟前
Rspack 源码解析(三十):SourceMapDevToolPlugin 如何生成并关联 source map
前端
console.log('npc')20 分钟前
从0到1实现任务评价统计功能:React + TypeScript 实战指南(小白注释版)
前端·react.js·typescript
IT_陈寒32 分钟前
为什么你应该学习React?
前端·人工智能·后端
ZoeLandia33 分钟前
React04:事件处理与受控表单
开发语言·前端·react.js·typescript
亿元程序员37 分钟前
用AI做了一款微信小游戏,却发现上传不了
前端
Ai-_Man41 分钟前
我需要批量导出Poe左边栏所有对话,而不是一条具体的对话内容,你们AI导出鸭可以吗?
开发语言·前端·javascript·人工智能·小程序
java1234_小锋43 分钟前
【技术专题】HTML5 网页技术 - Web Storage 本地存储 & 文件 API & 拖放 API
前端·html·html5
恋猫de小郭44 分钟前
Flutter 官方表示:AI 时代代码越来越容易写,为什么还要一套代码库?
android·前端·flutter
软件派1 小时前
Chrome 插件开发实战指南
前端·chrome