-
优先选watch解决需比对新旧值的场景，如权限跳转、状态通知、表单校验；watchEffect适用于依赖动态、只需响应“有变化”的场景，如搜索建议。
-
scrollbar-color仅在Firefox（64+）中生效，Chrome、Edge、Safari等WebKit/Blink内核浏览器完全不支持，必须使用::-webkit-scrollbar伪元素系列实现等效效果。
-
默认CSS盒模型使width不包含padding和border，导致实际宽度超出；使用box-sizing:border-box可让width包含二者，推荐全局设置*{box-sizing:border-box}，并配合calc()、flex:1等避免溢出。
-
先设置border-collapse:collapse避免双线边框，再统一定义table,th,td的border样式；通过调整边框宽度、颜色和类型（如solid、dashed）美化表格，可单独设置th下边框或外边框突出表头。
-
用纯HTML+CSS实现链接卡片，必须以语义化<a>为外层容器并设有效href；内部用<h3>标题、<p>描述、<spanclass="domain">域名及带onerror兜底的<img>加载favicon；CSS统一border-radius:8px，用box-shadow和font-weight实现hover反馈，并强制a:focus-visible{outline}保障可访问性。
-
优点： 简单快捷">
CDN引入适用于简单项目，通过link标签引入CSS，如ElementPlus；2.npm安装后全局引入，便于版本管理；3.按需引入推荐用于大型项目，结合插件自动导入组件及样式；4.使用SCSS变量定制主题，先定义变量再引入组件库样式，实现个性化主题。选择方式应根据项目规模与性能需求决定。
-
采用BEM命名法规范类名，按模块拆分CSS文件，使用scoped隔离样式，避免深层嵌套与全局污染，提升可维护性与性能。
-
Map和Set在JavaScript中提供高效数据操作。1.Map支持任意类型键、避免命名冲突并保持插入顺序，适用于对象键存储、缓存等场景；2.Set自动去重，可用于数组去重、集合运算及状态标记；实际应用如缓存异步请求、去重事件监听器，提升代码安全性与可读性。
-
用Chart.js渲染资产饼图最稳：需引入库、初始化canvas、匹配labels与data长度；数据通过script标签传JSON；响应式需父容器设宽；颜色由backgroundColor数组控制；更新数据后必须调用chart.update()。
-
HTML模板错误常因标签嵌套非法、自闭合不当、条件逻辑残留或服务端注入干扰导致，浏览器会自动修复DOM结构，故应以Elements面板为准而非源码。
-
HTMLpopover无“加了就弹”属性，实际是两套不兼容机制：纯HTML属性联动（popovertarget+popover布尔值）与JS调用（showPopover+popover="manual"），需明确选型；控制粒度粗用前者，需精细控制用后者；popover="auto"已弃用；Safari仅支持popovertarget且要求同步渲染；Firefox全不支持；跨浏览器稳定方案仍是<dialog>。
-
移动端轻点触发touchstart后300ms再触发click，导致重复执行；解决核心是让一次点击只触发一个回调：用@touchstart.prevent阻断click，或通过isMoved判断点击/拖动，或兼容PC用click为主、touchstart为辅并preventDefault。
-
最常用的是<div>、<p>、<h1>–<h6>、<img>和，覆盖80%以上页面需求；<div>因无默认样式、高嵌套性与布局兼容性成最安全容器，但不可替代语义标签。
-
Linaria能消除运行时样式计算，因其在构建阶段静态分析CSS模板字面量，将可求值样式转为独立CSS文件，运行时仅应用类名，不执行任何样式生成逻辑，彻底移除insertRule、动态style标签等同步开销。
-
grid-row-gap仅控制相邻行轨道间间距，不作用于容器首行顶边和末行底边；需配合padding或align-content实现上下视觉等距。
