实战经验 - 技术栈

1. 动态组件渲染

根据条件动态渲染不同组件。

css 复制代码

<component :is="message.isNewContainer ? 'kd-button' : 'Button'" />

2. 样式局部修改

基础样式加上条件样式，做到局部覆盖，不破坏原有样式。

ini 复制代码

:class="['wps-bubble', { 'wps-bubble-new': message.isNewContainer }]"

3. 条件传递样式（内联样式）

只有满足条件时才传递特定样式。

javascript 复制代码

getStyle(msg) {
  return msg.isNewContainer ? { borderRadius: msg.borderRadius + 'px' } : {};
}

ini 复制代码

:style="getStyle(message)"

4. 条件传递属性

只在条件满足时传递属性，避免传递无意义的 undefined。

ini 复制代码

<Header v-bind="{ customClass: message.isNewContainer ? customClass : undefined }" />

5. 设备判断示例

ipad 生产力版本

javascript 复制代码

// 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() 阻止事件继续传递。

xml 复制代码

<!-- 父组件 -->
<template>
  <div class="parent" @click.capture="onParentClick">
    <ChildComponent />
  </div>
</template>

js 复制代码

<!-- 子组件 -->
<script setup>
import ChildComponent from "./ChildComponent.vue"

const onParentClick = (e) => {
  e.stopPropagation()
  console.log('父组件阻止了事件传播')
}
</script>

7. 前后端联调

类型误判：客户端传入 "false"（字符串），我误以为是布尔 false，导致判断逻辑出错。之后工作中需明确数据类型并做好类型转换。

js 复制代码

// 通用方式：使用 JSON.parse（需保证值为合法 JSON 布尔）
const flag = typeof message.flag === 'string' ? JSON.parse(message.flag) : !!message.flag;

字符串处理：对字符串值应使用 trim() 去除首尾空格，防止因多余空格导致判断异常。

js 复制代码

const inputValue = (message.content || '').trim();
if (inputValue === '') {
  console.warn('内容为空或仅包含空格');
}

图片链接校验：前端对图片链接应进行有效性判断（如非空、是否为合法 URL），避免加载失败或展示空白。

js 复制代码

const isValidUrl = (url) => {
  try {
    return !!url && new URL(url);
  } catch (e) {
    return false;
  }
};

const imgSrc = isValidUrl(message.imgUrl) ? message.imgUrl : defaultImg;

默认值处理：在新功能接入时，要考虑旧客户端未传新字段的情况，为关键变量设置合理的默认值，保障功能兼容性。

js 复制代码

const borderRadius = message.borderRadius ?? 8; // 旧客户端未传则使用默认值 8

// 或
const customClass = message.customClass || 'default-class';

8. 引用陷阱

在 JavaScript 中，对象是引用类型，当你执行：

scss 复制代码

state.arr.push(user)

你并不是将 user 的值复制进数组 ，而是将它的引用地址放进了数组。此时：

外部变量 user 和数组中的一项 state.arr[0] 指向同一个对象；
当你修改 user.id 或 user.name 时，数组里的那一项也会被同时修改！

正确做法：入数组前进行浅拷贝，与原对象断开引用关系：

scss 复制代码

// 方法 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()）；