vue3相关知识点

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;
	}