vue3相关知识点

微笑么么哒

已于 2023-10-31 14:39:26 修改

阅读量75

点赞数

文章标签： javascript 前端开发语言 vue typescript

于 2023-10-19 11:14:04 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37759901/article/details/132188085

版权

1.Vue Provide / Inject 详细介绍（跨组件通信、响应式变化、版本变化）
https://blog.youkuaiyun.com/qq_41809113/article/details/122071958
2.vue3中hooks的介绍及用法
https://blog.youkuaiyun.com/JaneLittle/article/details/127127644
https://blog.youkuaiyun.com/weixin_42776111/article/details/126095393
https://article.juejin.cn/post/7247698370578776124
3.当后台数据还没请求完成时候就渲染dom，导致报错报错Cannot read properties of undefined (reading ‘lable2’)无法渲染解决方法：

1.可以加个v-if判定标识，当有数据的时候渲染，没数据的时候不展示这个dom，但是缺点就是如果这么模块的经常点击刷新请求的操作，
页面会一闪一闪的，影响体验。当然如果页面整体只刷新一次就无所谓。
<div class="box" v-if="!state.loading2"></div>
2.方法二：声明的时候用响应式ref()去声明才不报错【】或者{}
<span style="color:green">{{state.centerData.lable2.showStr}}</span>
再打个比方：（这是常见的简单版本）
<span style="color:green">{{state.centerData.lable2}}</span>
const state = reactive({
		topData: ref([]),
		centerData: ref({}),
		}）
比如渲染这种对象里的对象得多包一层为{}的标识才不报错
const state = reactive({
		topData: ref([]),
		centerData: ref({lable1:{},lable2:{},lable3:{},chart:{}}),
		}）

4.2种动态添加class方法，如何在v-for的时候动态绑定class？
在这里插入图片描述

方法1： :class="`item${index + 1}`"
<div :class="`item${index + 1}`" class="boxItem item1" v-for="(item, index) in state.topData"></div>
方法2： :class="addClass(index + 1)"
const addClass = (status: any) => {
	var cname = ''
	switch (status) {
		case 1: //待机
			cname = 'item1'
			break
		case 2: //运行
			cname = 'item2'
			break
		case 3: //待料
			cname = 'item3'
			break
		case 4: //故障
			cname = 'item4'
			break
	}
	return cname
}
css:
.item1 {
		background: #4f97f8;
	}

	.item2 {
		background: #62ddb1;
	}

	.item3 {
		background: #70b975;
	}

	.item4 {
		background: #462bc5;
	}