1. 动态组件渲染
根据条件动态渲染不同组件。
<component :is="condition ? 'a' : 'b'" />
2. 样式修改(不破坏原有样式)
:class 写法对比总结（Vue 中）
| 写法形式 | 示例 | 说明 | 是否加大括号 |
|---|---|---|---|
| 字符串类名 | :class="'a'" | 只有一个类名，直接写字符串 | ❌ 不加 |
| 多个类名 | :class="['a', 'b']" | 固定多个类名，按顺序拼接 | ❌ 不加 |
| 条件类名（表达式返回字符串） | :class="['a', condition ? 'b' : 'c']" | 根据条件添加类名，三元表达式结果是字符串 | ❌ 不加 |
| 条件类名（对象写法） | :class="{ 'b': condition }" | 类名作为 key，值为布尔条件 | ✅ 要加 |
| 混合形式 | :class="['a', { 'b': condition }]" | 同时有固定类名和条件类名 | ✅ 条件部分要加 |
当样式内容较多时：
<p :class="getClass()">
methods: {
getClass() {
return [
'a',
condition ? 'b' : 'c'
];
}
}
3. 条件传递样式（内联样式）
只有满足条件时才传递特定样式。
getStyle(msg) {
return msg.isNewContainer ? { borderRadius: msg.borderRadius + 'px' } : {};
}
:style="getStyle(message)"
4. 条件传递属性
只在条件满足时传递属性，避免传递无意义的 undefined。
<Header v-bind="{ customClass: message.isNewContainer ? customClass : undefined }" />
5. 设备判断示例
ipad 生产力版本
// mac版 Office 判断
export const macOffice = window.navigator.userAgent.toLowerCase().includes('mac-office')
// iPad OS 判断
export const isiPadOs = window.navigator.userAgent.toLowerCase().includes('ios-pad')
6. 父组件捕获阶段拦截子组件点击事件
子组件点击事件被父组件捕获并阻止，子组件内的点击事件不会触发。
利用 .capture 修饰符，让父组件在事件捕获阶段先执行拦截，并用 e.stopPropagation() 阻止事件继续传递。
<!-- 父组件 -->
<template>
<div class="parent" @click.capture="onParentClick">
<ChildComponent />
</div>
</template>
<!-- 子组件 -->
<script setup>
import ChildComponent from "./ChildComponent.vue"
const onParentClick = (e) => {
e.stopPropagation()
console.log('父组件阻止了事件传播')
}
</script>
7. 前后端联调
- 类型误判：客户端传入 "false"（字符串），我误以为是布尔 false，导致判断逻辑出错。之后工作中需明确数据类型并做好类型转换。
// 通用方式：使用 JSON.parse（需保证值为合法 JSON 布尔）
const flag = typeof message.flag === 'string' ? JSON.parse(message.flag) : !!message.flag;
- 字符串处理：对字符串值应使用 trim() 去除首尾空格，防止因多余空格导致判断异常。
const inputValue = (message.content || '').trim();
if (inputValue === '') {
console.warn('内容为空或仅包含空格');
}
- 图片链接校验：前端对图片链接应进行有效性判断（如非空、是否为合法 URL），避免加载失败或展示空白。
const isValidUrl = (url) => {
try {
return !!url && new URL(url);
} catch (e) {
return false;
}
};
const imgSrc = isValidUrl(message.imgUrl) ? message.imgUrl : defaultImg;
- 默认值处理：在新功能接入时，要考虑旧客户端未传新字段的情况，为关键变量设置合理的默认值，保障功能兼容性。
const borderRadius = message.borderRadius ?? 8; // 旧客户端未传则使用默认值 8
// 或
const customClass = message.customClass || 'default-class';
8. 引用陷阱
在 JavaScript 中，对象是引用类型，当你执行：
state.arr.push(user)
你并不是将 user 的值复制进数组，而是将它的引用地址放进了数组。此时：
- 外部变量
user和数组中的一项state.arr[0]指向同一个对象； - 当你修改
user.id或user.name时，数组里的那一项也会被同时修改！
正确做法：入数组前进行浅拷贝，与原对象断开引用关系：
// 方法 1：手动拷贝字段
state.arr.push({ id: user.id, name: user.name })
// 方法 2：使用扩展运算符
state.arr.push({ ...user })
// 方法 3：Object.assign 实现浅拷贝
const userCopy = Object.assign({}, user)
state.arr.push(userCopy)
🧠 tips：
- 数组、对象、函数 都是引用类型；
- 使用
push(obj)时必须考虑是否需要拷贝； - 对于更复杂或嵌套结构的对象，可使用深拷贝工具（如
structuredClone()或lodash.cloneDeep()）；
9. 数据交互 set get
set()：用于设置状态、更新值或修改上下文环境
get()：用于读取当前状态、获取结果、获取与状态相关的派生值
所以： ✅ 先 set 再 get 是为了确保你拿到的是最新设置后的值或状态
