本文已参与「新人创作礼」活动，一起开启掘金创作之路。
业务场景
轮播图的下方区域有缩略图预览区。
需求（后文简称需求1，需求2）：
1、页面加载完成用户还未进行任何操作时，需要给某一个指定的缩略图添加 :class="active",效果为橙色高亮边框。
2、用户鼠标滑过哪个缩略图，就给哪个缩略图添加:class="active"。
部分源码
使用swiper，v-for遍历从服务器获取的图片列表然后展示
<swiper-slide
v-for="carousel in imgList"
:key="carousel.id"
@mouseenter="currentImg(carousel.id)"
>
<img
:src="carousel.imgUrl"
:class="{ active: isActiveId === carousel.id }"
/>
</swiper-slide>
基本思路：:class="{ active: isActiveId === carousel.id }
@carousel.id：从服务器端获取到的每个图片的id
@isActive:在vue中引入新的变量，当该变量的值和对应图片id相等，对应图片则被添加active类名
debug过程
- 只实现了需求2。但页面初次加载时，无法实现需求1
//...略
setup(){
let isActiveId = ref()
function currentImg(currentId){
isActiveId.value = currentId
}
//...略
}
- 尝试在实现需求2的同时，去实现需求1
既然
isActiveId需要一个默认初始值(defaultList.value.id:该数据是axios发请求从服务器获取)，那就直接在声明时写进去。
//...略
setup(){
let isActiveId = ref(defaultList.value.id)//该数据是axios发请求从服务器获取的默认图片id
function currentImg(currentId){
isActiveId.value = currentId
}
//...略
}
执行以上代码后报错：大致报错问题为ref对象创建失败、无法读取defaultList.value的id属性
- 问题产生原因
defaultList.value.id来自于以下代码段
const defaultList = computed(() => props.imgList[0])
props.imgList[0]也是从服务器拿过来的，当页面初次渲染时，该数据还未从服务器端返回到本地，所以初次渲染时props.imgList[0] === undefined,
而undefined.id导致了报错。
- 解决方式
const defaultList = computed(() => props.imgList[0] || {})
当props.imgList[0] === undefined时，返回一个空对象。该空对象身上查找不到id属性，那么defaultList.id === undefined，而ref(undefined)是不会报错的；
待服务器数据返回之后，props.imgList[0]数据更新，进而触发computed()重新生成defaultList，页面就正常的加载了。
