1.疑惑类
1.1 存在疑惑代码的理解：
非基础数据类型 等号 代表改变变量的地址指向
我这里的目的就是让valueArray 为数组，if( ){} 这里面的代码的意思是 确保代码在一开始为undefinded 或者 null 的时候，仍未数组的形式
总结来说就是:数组赋值给变量，变量再加在数局里面
1.2 通过索引直接控制分组的显隐和顺序
2. 遗忘类
2.1 正则表达式
代码理解（惰性匹配）
const nameReg = /【(.*?)】/i
const getName = (name) => {
const results = nameReg.exec(name)
console.log(results)
return results[1]
}
2.2 includes() 方法
3. 技巧类
3.1小图标 + 字符实体
>
小图标则采用vant3的组件库
3.2关于在 computed 书写的必要性
const detailInfos = ref({})
const mainPart = computed(() => detailInfos.value.mainPart)
3.2.1 类比场景
假设原始数据是：
const detailInfos = ref({
mainPart: "默认内容",
otherPart: "..."
});
不使用计算属性：
// 直接访问嵌套属性（需重复写冗长路径）
console.log(detailInfos.value.mainPart); // "默认内容"
使用计算属性：
const mainPart = computed(() => detailInfos.value.mainPart);
console.log(mainPart.value); // "默认内容"（自动追踪变化）
总结：在有ref 的时候，为保持数据的响应式，就加上 computed
3.2.2 性能优化：避免重复计算
如果 detailInfos.value.mainPart 的获取需要复杂计算（如过滤、映射等），直接多次访问会导致重复计算：
// ❌ 每次访问都会执行 getter 函数
const filteredList = detailInfos.value.mainPart.filter(item => item.active);
使用 computed 后，结果会被缓存，只有依赖变化时才重新计算：
// ✅ 计算属性自动缓存
const filteredList = computed(() =>
detailInfos.value.mainPart.filter(item => item.active)
);
3.2.3 代码可维护性：集中管理数据逻辑
将 detailInfos.value.mainPart 映射为 mainPart，相当于为数据创建了一个抽象层：
- 简化代码：后续使用
mainPart代替冗长的detailInfos.value.mainPart。 - 逻辑隔离：如果未来
mainPart的获取方式变化（比如需要附加处理），只需修改计算属性的定义，而无需全局搜索替换。
3.3 通过索引直接控制分组的显隐和顺序
为什么不用 indexOf？
includes()更语义化，直接返回布尔值，无需判断indexOf() !== -1。includes()能正确处理NaN，而indexOf无法检测NaN。
4. 知识点类
关于background
复合属性写法 background: url(../img/detail/icon_check.png) 0 0 / 100% 100%
详解：
- 背景图片路径
url(../img/detail/icon_check.png)指定了背景图片的路径，浏览器会加载该位置的图片作为背景。 - 背景位置
0 0是background-position的简写，表示图片的起始位置为元素的左上角（X 轴和 Y 轴均无偏移）。 - 背景尺寸
/ 100% 100%是background-size的值，表示图片会被拉伸或压缩以完全覆盖元素的整个区域（宽度和高度均占满 100%）。
