上周写了个[nginx 日志分析系统](https://www.kaisir.cn/post/186)，这几天花了点时间把代码整理了下，现已开源。 欢迎各位有需要的开发者自取。

官方文档 媒体组件 / image 说给一个图片添加这个属性， 可以实现长按识别二维码的效果 在开发者工具是可以的，也有效果， 发体验版不行。 也没有什么报错信息。 非常的坑。 比如这样的 普通的二维

相比传统span标签高亮方式，该API通过创建Range对象标识文本范围，使用Highlight对象管理多个Range，并在渲染层处理高亮，避免修改DOM结构和页面重绘。

场景说明 在团队协作开发中，开发者经常需要在特性分支（如 dev_feature_xxx）上实现新功能，同时需要定期同步主分支（如 develop）的最新代码，避免最终合并时产生严重冲突。本文将通过一

移动端三种像素 Viewport(视口) width=device-width：布局视口宽度等于设备宽度 initial-scale=1.0：初始缩放比例为 1 user-scalable=no：禁止

本文深入解析JavaScript异步编程中的Promise与async/await机制，详细介绍了async函数的声明方式及其返回值特性，以及await操作符的工作原理和暂停/恢复执行机制。

一、层级分离原则

1. 模板层（UI）分离

❌ 反例：模板中写复杂表达式和数据操作

<template>
  <div>
    <!-- 反例1: 模板中写复杂表达式 -->
    <div>
      {{ goodsList.filter(item => item.price > 100).map(item => item.name).join(',') }}
    </div>
    
    <!-- 反例2: 直接在模板中修改数据 -->
    <button @click="goodsList.push({ id: Date.now(), name: '新商品', price: 99 })">
      添加商品
    </button>
    
    <!-- 反例3: 模板中写复杂计算 -->
    <div>
      总价: {{ goodsList.reduce((sum, item) => sum + item.price * item.count, 0).toFixed(2) }}
    </div>
    
    <!-- 反例4: 用样式控制业务逻辑 -->
    <div :style="{ display: isVisible ? 'block' : 'none' }">
      内容
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const goodsList = ref([
  { id: 1, name: '商品A', price: 150, count: 2 },
  { id: 2, name: '商品B', price: 80, count: 1 },
]);
const isVisible = ref(true);
</script>

✅ 正例：模板只负责渲染，逻辑放在 computed/methods

<template>
  <div>
    <!-- 正例1: 调用简单的 computed -->
    <div>{{ filteredGoodsNames }}</div>
    
    <!-- 正例2: 调用方法处理事件 -->
    <button @click="handleAddGoods">添加商品</button>
    
    <!-- 正例3: 使用 computed 计算总价 -->
    <div>总价: {{ totalPrice }}</div>
    
    <!-- 正例4: 用 v-if 控制渲染 -->
    <div v-if="isVisible">内容</div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 原始数据
const goodsList = ref([
  { id: 1, name: '商品A', price: 150, count: 2 },
  { id: 2, name: '商品B', price: 80, count: 1 },
]);
const isVisible = ref(true);

// 数据处理放在 computed
const filteredGoodsNames = computed(() => {
  return goodsList.value
    .filter(item => item.price > 100)
    .map(item => item.name)
    .join(',');
});

const totalPrice = computed(() => {
  return goodsList.value
    .reduce((sum, item) => sum + item.price * item.count, 0)
    .toFixed(2);
});

// 事件处理放在 methods
const handleAddGoods = () => {
  goodsList.value.push({
    id: Date.now(),
    name: '新商品',
    price: 99,
    count: 1,
  });
};
</script>

2. 逻辑层（数据）分离

❌ 反例：在 data 中存储派生数据，在模板中直接调用接口

<template>
  <div>
    <!-- 反例: 在模板中直接调用接口 -->
    <button @click="fetchGoods">加载商品</button>
    <div v-for="item in formattedList" :key="item.id">
      {{ item.displayName }} - ¥{{ item.formattedPrice }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

// 反例1: 存储格式化后的派生数据
const formattedList = ref([
  { id: 1, displayName: '商品A', formattedPrice: '150.00' },
]);

// 反例2: 在事件中直接写接口请求
const fetchGoods = () => {
  axios.get('/api/goods').then(res => {
    // 每次都要手动格式化并同步到 formattedList
    formattedList.value = res.data.map((item: any) => ({
      id: item.id,
      displayName: `${item.name} (${item.category})`,
      formattedPrice: item.price.toFixed(2),
    }));
  });
};
</script>

✅ 正例：data 只存原始数据，computed 处理派生数据，接口抽离到 api

<template>
  <div>
    <button @click="handleFetchGoods" :loading="loading">加载商品</button>
    <div v-for="item in formattedGoodsList" :key="item.id">
      {{ item.displayName }} - ¥{{ item.formattedPrice }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { fetchGoodsList } from '@/api/goods'; // 接口抽离到 api

// 正例1: data 只存储原始数据
const goodsList = ref([]);
const loading = ref(false);

// 正例2: 派生数据用 computed 自动计算
const formattedGoodsList = computed(() => {
  return goodsList.value.map(item => ({
    id: item.id,
    displayName: `${item.name} (${item.category})`,
    formattedPrice: item.price.toFixed(2),
  }));
});

// 正例3: 接口请求和业务逻辑抽离
const handleFetchGoods = async () => {
  try {
    loading.value = true;
    const res = await fetchGoodsList();
    goodsList.value = res.data; // 只更新原始数据，computed 自动更新
  } catch (error) {
    console.error('加载失败', error);
  } finally {
    loading.value = false;
  }
};
</script>

// src/api/goods.ts - 接口抽离
import request from '@/utils/request';

export const fetchGoodsList = () => {
  return request.get('/api/goods');
};

3. 组件层（业务解耦）

❌ 反例：通用组件包含业务逻辑

<!-- Table.vue - 反例: 通用组件直接调用业务接口 -->
<template>
  <el-table :data="tableData" :loading="loading">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="price" label="价格" />
  </el-table>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 反例: 通用组件内部直接调用业务接口
const tableData = ref([]);
const loading = ref(false);

onMounted(() => {
  loading.value = true;
  axios.get('/api/goods').then(res => {
    tableData.value = res.data;
    loading.value = false;
  });
});
</script>

<!-- GoodsList.vue - 反例: 父组件传原始数据，子组件内部格式化 -->
<template>
  <Table :data="goodsList" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Table from './Table.vue';
import { fetchGoodsList } from '@/api/goods';

const goodsList = ref([]);

const loadData = async () => {
  const res = await fetchGoodsList();
  goodsList.value = res.data; // 传原始数据给子组件
};
</script>

✅ 正例：通用组件只接收 props，业务组件处理数据

<!-- Table.vue - 正例: 通用组件只接收 props，不包含业务逻辑 -->
<template>
  <el-table :data="data" :loading="loading" v-bind="$attrs">
    <slot />
  </el-table>
</template>

<script setup lang="ts">
defineProps<{
  data: any[];
  loading?: boolean;
}>();
</script>

<!-- GoodsList.vue - 正例: 业务组件处理数据，传给通用组件 -->
<template>
  <Table :data="formattedGoodsList" :loading="loading">
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="price" label="价格" />
  </Table>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import Table from './Table.vue';
import { fetchGoodsList } from '@/api/goods';

const goodsList = ref([]);
const loading = ref(false);

// 业务组件负责数据格式化
const formattedGoodsList = computed(() => {
  return goodsList.value.map(item => ({
    ...item,
    price: `¥${item.price.toFixed(2)}`,
  }));
});

const loadData = async () => {
  try {
    loading.value = true;
    const res = await fetchGoodsList();
    goodsList.value = res.data;
  } finally {
    loading.value = false;
  }
};

loadData();
</script>

二、拆分原则

1. 函数拆分

❌ 反例：过度拆分，逻辑分散

// src/utils/goods-list/getItem.ts
export const getItem = (list: any[], id: number) => {
  return list.find(item => item.id === id);
};

// src/utils/goods-list/setItem.ts
export const setItem = (list: any[], item: any) => {
  const index = list.findIndex(i => i.id === item.id);
  if (index > -1) {
    list[index] = item;
  }
};

// src/utils/goods-list/checkItem.ts
export const checkItem = (item: any) => {
  return item && item.price > 0;
};

// src/utils/goods-list/filterItem.ts
export const filterItem = (list: any[], condition: any) => {
  return list.filter(item => item.price > condition.minPrice);
};

// GoodsList.vue
<script setup lang="ts">
import { getItem } from '@/utils/goods-list/getItem';
import { setItem } from '@/utils/goods-list/setItem';
import { checkItem } from '@/utils/goods-list/checkItem';
import { filterItem } from '@/utils/goods-list/filterItem';

// 调用时需要跨文件引入，逻辑链路变长
const handleUpdate = (id: number, newData: any) => {
  const item = getItem(goodsList.value, id);
  if (checkItem(item)) {
    setItem(goodsList.value, { ...item, ...newData });
  }
};
</script>

✅ 正例：按业务逻辑拆分，函数内聚

<!-- GoodsList.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';
import { fetchGoodsList } from '@/api/goods';

const goodsList = ref([]);
const loading = ref(false);

// 正例: 按业务逻辑拆分成核心函数，函数内聚
const loadGoodsData = async () => {
  try {
    loading.value = true;
    const res = await fetchGoodsList();
    goodsList.value = formatGoodsData(res.data);
  } catch (error) {
    console.error('加载失败', error);
  } finally {
    loading.value = false;
  }
};

// 格式化数据 - 仅当前组件使用，写在组件内
const formatGoodsData = (data: any[]) => {
  return data.map(item => ({
    ...item,
    displayPrice: `¥${item.price.toFixed(2)}`,
    isAvailable: item.stock > 0,
  }));
};

// 如需复用，再抽离到 utils/goods.ts
loadGoodsData();
</script>

2. 组件拆分

❌ 反例：过度拆分，增加通信成本

<!-- SearchInput.vue -->
<template>
  <el-input v-model="inputValue" @input="handleInput" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputValue = defineModel<string>('modelValue');
const emit = defineEmits(['update:modelValue']);

const handleInput = (value: string) => {
  emit('update:modelValue', value);
};
</script>

<!-- SearchButton.vue -->
<template>
  <el-button @click="handleClick">{{ text }}</el-button>
</template>

<script setup lang="ts">
defineProps<{ text: string }>();
const emit = defineEmits(['click']);

const handleClick = () => {
  emit('click');
};
</script>

<!-- SearchWrapper.vue -->
<template>
  <div class="search-wrapper">
    <SearchInput v-model="keyword" />
    <SearchButton text="搜索" @click="handleSearch" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import SearchInput from './SearchInput.vue';
import SearchButton from './SearchButton.vue';

const keyword = ref('');
const emit = defineEmits(['search']);

const handleSearch = () => {
  emit('search', keyword.value);
};
</script>

✅ 正例：保留单个组件，内部封装

<!-- SearchBar.vue - 正例: 单个组件，逻辑闭环 -->
<template>
  <div class="search-bar">
    <el-input v-model="keyword" placeholder="请输入关键词" clearable />
    <el-button type="primary" @click="handleSearch">搜索</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const keyword = ref('');
const emit = defineEmits(['search']);

const handleSearch = () => {
  emit('search', keyword.value);
};
</script>

三、目录拆分原则

组件目录结构说明

当工具函数、样式、组合式函数仅被单个组件使用时，应放在该组件所在目录下，而不是全局 src/utils。

组件目录结构示例：
ProductList/
  ├── index.vue              # 主组件
  ├── index.scss             # 组件样式
  ├── composables/           # 仅当前组件使用的组合式函数
  │   ├── useProductData.ts
  │   └── useProductFilter.ts
  ├── utils/                 # 仅当前组件使用的工具函数
  │   ├── formatProduct.ts
  │   └── validateProduct.ts
  └── components/            # 仅当前组件使用的子组件
      └── ProductCard.vue

1. 工具函数拆分

❌ 反例：仅单组件使用的函数放在全局 utils

src/
  utils/
    product-list/            # 反例：仅在 ProductList.vue 使用
      formatProduct.ts
      filterProduct.ts
      validateProduct.ts

<!-- src/views/product/ProductList.vue -->
<script setup lang="ts">
import { formatProduct } from '@/utils/product-list/formatProduct';
import { filterProduct } from '@/utils/product-list/filterProduct';
import { validateProduct } from '@/utils/product-list/validateProduct';

// 引入路径长，且这些函数只在当前组件使用
</script>

✅ 正例：仅当前组件使用的工具函数放在组件目录下

src/views/product/ProductList/
  ├── index.vue
  ├── utils/                 # 正例：仅当前组件使用
  │   ├── formatProduct.ts
  │   └── filterProduct.ts
  └── index.scss

// src/views/product/ProductList/utils/formatProduct.ts
// 仅 ProductList 组件使用
export const formatProductPrice = (price: number): string => {
  return `¥${price.toFixed(2)}`;
};

export const formatProductName = (name: string, category: string): string => {
  return `${name} (${category})`;
};

// src/views/product/ProductList/utils/filterProduct.ts
// 仅 ProductList 组件使用
export const filterByPriceRange = (products: any[], min: number, max: number) => {
  return products.filter(p => p.price >= min && p.price <= max);
};

export const filterByCategory = (products: any[], category: string) => {
  return products.filter(p => p.category === category);
};

<!-- src/views/product/ProductList/index.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';
import { formatProductPrice, formatProductName } from './utils/formatProduct';
import { filterByPriceRange } from './utils/filterProduct';

const products = ref([]);

// 引入路径短，且明确表示这些函数属于当前组件
const formattedProducts = computed(() => {
  return products.value.map(p => ({
    ...p,
    displayPrice: formatProductPrice(p.price),
    displayName: formatProductName(p.name, p.category),
  }));
});
</script>

2. 组合式函数（Composables）拆分

❌ 反例：仅单组件使用的 composable 放在全局

src/
  composables/
    useProductData.ts        # 反例：仅在 ProductList.vue 使用
    useProductFilter.ts      # 反例：仅在 ProductList.vue 使用

<!-- src/views/product/ProductList.vue -->
<script setup lang="ts">
import { useProductData } from '@/composables/useProductData';
import { useProductFilter } from '@/composables/useProductFilter';

// 看起来像是全局可复用的，但实际上只在当前组件使用
</script>

✅ 正例：仅当前组件使用的 composable 放在组件目录下

src/views/product/ProductList/
  ├── index.vue
  ├── composables/           # 正例：仅当前组件使用
  │   ├── useProductData.ts
  │   └── useProductFilter.ts
  └── index.scss

// src/views/product/ProductList/composables/useProductData.ts
// 仅 ProductList 组件使用
import { ref, computed } from 'vue';
import { fetchProductList } from '@/api/product';

export const useProductData = () => {
  const products = ref([]);
  const loading = ref(false);
  const error = ref(null);

  const loadProducts = async () => {
    try {
      loading.value = true;
      const res = await fetchProductList();
      products.value = res.data;
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  };

  const formattedProducts = computed(() => {
    return products.value.map(p => ({
      ...p,
      displayPrice: `¥${p.price.toFixed(2)}`,
    }));
  });

  return {
    products,
    formattedProducts,
    loading,
    error,
    loadProducts,
  };
};

// src/views/product/ProductList/composables/useProductFilter.ts
// 仅 ProductList 组件使用
import { ref, computed } from 'vue';

export const useProductFilter = (products: any[]) => {
  const searchKeyword = ref('');
  const priceRange = ref([0, 10000]);
  const selectedCategory = ref('');

  const filteredProducts = computed(() => {
    let result = products.value;

    // 按关键词过滤
    if (searchKeyword.value) {
      result = result.filter(p =>
        p.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
      );
    }

    // 按价格范围过滤
    result = result.filter(
      p => p.price >= priceRange.value[0] && p.price <= priceRange.value[1]
    );

    // 按分类过滤
    if (selectedCategory.value) {
      result = result.filter(p => p.category === selectedCategory.value);
    }

    return result;
  });

  return {
    searchKeyword,
    priceRange,
    selectedCategory,
    filteredProducts,
  };
};

<!-- src/views/product/ProductList/index.vue -->
<script setup lang="ts">
import { useProductData } from './composables/useProductData';
import { useProductFilter } from './composables/useProductFilter';
import { onMounted } from 'vue';

// 引入路径短，且明确表示这些 composable 属于当前组件
const { formattedProducts, loading, loadProducts } = useProductData();
const { searchKeyword, priceRange, filteredProducts } = useProductFilter(formattedProducts);

onMounted(() => {
  loadProducts();
});
</script>

<template>
  <div>
    <input v-model="searchKeyword" placeholder="搜索商品" />
    <div v-for="product in filteredProducts" :key="product.id">
      {{ product.displayName }} - {{ product.displayPrice }}
    </div>
  </div>
</template>

3. 样式拆分

❌ 反例：仅单组件使用的样式放在全局

src/
  styles/
    product-list.scss        # 反例：仅在 ProductList.vue 使用

<!-- src/views/product/ProductList.vue -->
<style lang="scss">
@use '@/styles/product-list.scss';
</style>

✅ 正例：仅当前组件使用的样式放在组件目录下

src/views/product/ProductList/
  ├── index.vue
  ├── index.scss             # 正例：组件主样式
  ├── styles/                # 正例：样式拆分（如果样式较多）
  │   ├── variables.scss
  │   └── mixins.scss
  └── components/
      └── ProductCard.vue
      └── ProductCard.scss

// src/views/product/ProductList/index.scss
// 仅 ProductList 组件使用
@use './styles/variables.scss';
@use './styles/mixins.scss';

.product-list {
  padding: 20px;
  
  &__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  &__content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

// src/views/product/ProductList/styles/variables.scss
// 仅 ProductList 组件使用
$product-card-width: 200px;
$product-card-gap: 16px;
$product-header-height: 60px;

// src/views/product/ProductList/styles/mixins.scss
// 仅 ProductList 组件使用
@mixin product-card-hover {
  transition: transform 0.2s;
  
  &:hover {
    transform: translateY(-4px);
  }
}

<!-- src/views/product/ProductList/index.vue -->
<template>
  <div class="product-list">
    <div class="product-list__header">...</div>
    <div class="product-list__content">...</div>
  </div>
</template>

<style scoped lang="scss">
@import './index.scss';
</style>

4. 子组件拆分

❌ 反例：仅单组件使用的子组件放在全局 components

src/
  components/
    ProductCard.vue          # 反例：仅在 ProductList.vue 使用
    ProductFilter.vue        # 反例：仅在 ProductList.vue 使用

<!-- src/views/product/ProductList.vue -->
<script setup lang="ts">
import ProductCard from '@/components/ProductCard.vue';
import ProductFilter from '@/components/ProductFilter.vue';

// 看起来像是全局组件，但实际上只在当前组件使用
</script>

✅ 正例：仅当前组件使用的子组件放在组件目录下

src/views/product/ProductList/
  ├── index.vue
  ├── components/            # 正例：仅当前组件使用
  │   ├── ProductCard.vue
  │   ├── ProductCard.scss
  │   ├── ProductFilter.vue
  │   └── ProductFilter.scss
  └── index.scss

<!-- src/views/product/ProductList/components/ProductCard.vue -->
<!-- 仅 ProductList 组件使用 -->
<template>
  <div class="product-card">
    <img :src="product.image" :alt="product.name" />
    <h3>{{ product.name }}</h3>
    <p class="price">{{ product.displayPrice }}</p>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  product: any;
}>();
</script>

<style scoped lang="scss">
@import './ProductCard.scss';
</style>

<!-- src/views/product/ProductList/index.vue -->
<script setup lang="ts">
import ProductCard from './components/ProductCard.vue';
import ProductFilter from './components/ProductFilter.vue';

// 引入路径短，且明确表示这些组件属于当前组件
</script>

<template>
  <div class="product-list">
    <ProductFilter />
    <ProductCard
      v-for="product in products"
      :key="product.id"
      :product="product"
    />
  </div>
</template>

5. 何时抽离到全局

当以下情况出现时，再考虑抽离到全局：

✅ 需要复用时抽离到全局

# 情况1: 多个组件开始使用相同的工具函数
src/views/product/ProductList/utils/formatProduct.ts  # 原本在这里
src/views/order/OrderList.vue                        # 现在也要用
src/views/cart/CartList.vue                          # 现在也要用

# 应该抽离到：
src/utils/product/formatProduct.ts

// src/utils/product/formatProduct.ts
// 多个组件复用，抽离到全局
export const formatProductPrice = (price: number): string => {
  return `¥${price.toFixed(2)}`;
};

export const formatProductName = (name: string, category: string): string => {
  return `${name} (${category})`;
};

<!-- src/views/product/ProductList/index.vue -->
<script setup lang="ts">
// 从全局引入
import { formatProductPrice } from '@/utils/product/formatProduct';
</script>

<!-- src/views/order/OrderList.vue -->
<script setup lang="ts">
// 从全局引入
import { formatProductPrice } from '@/utils/product/formatProduct';
</script>

完整示例：组件目录结构

src/views/product/ProductList/
  ├── index.vue                    # 主组件
  ├── index.scss                   # 组件主样式
  │
  ├── composables/                 # 仅当前组件使用的组合式函数
  │   ├── useProductData.ts
  │   ├── useProductFilter.ts
  │   └── useProductPagination.ts
  │
  ├── utils/                       # 仅当前组件使用的工具函数
  │   ├── formatProduct.ts
  │   ├── filterProduct.ts
  │   └── validateProduct.ts
  │
  ├── components/                  # 仅当前组件使用的子组件
  │   ├── ProductCard/
  │   │   ├── index.vue
  │   │   └── index.scss
  │   ├── ProductFilter/
  │   │   ├── index.vue
  │   │   └── index.scss
  │   └── ProductPagination/
  │       ├── index.vue
  │       └── index.scss
  │
  └── styles/                      # 样式拆分（如果样式较多）
      ├── variables.scss
      ├── mixins.scss
      └── animations.scss

总结对比

场景	❌ 反例（全局）	✅ 正例（组件目录）
仅单组件使用的工具函数	src/utils/product-list/format.ts	ProductList/utils/format.ts
仅单组件使用的 composable	src/composables/useProductData.ts	ProductList/composables/useProductData.ts
仅单组件使用的样式	src/styles/product-list.scss	ProductList/index.scss
仅单组件使用的子组件	src/components/ProductCard.vue	ProductList/components/ProductCard.vue
多个组件复用	-	抽离到全局 src/utils/ 或 src/composables/

原则：

• 仅当前组件使用 → 放在组件目录下（utils/、composables/、components/、styles/）
• 多个组件复用 → 抽离到全局（src/utils/、src/composables/、src/components/）

总结

• 模板层：只负责渲染，不写复杂表达式和数据操作
• 逻辑层：data 存原始数据，computed 处理派生数据，接口抽离到 api
• 组件层：通用组件只接收 props，业务组件处理数据逻辑
• 拆分原则：按业务逻辑拆分，避免过度拆分增加复杂度

这些示例展示了如何在实际项目中应用这些原则。

当你用 Vue/React打包出一个前端项目后，会生成一个 静态文件目录（通常是 dist/ 文件夹），里面包含 HTML、CSS、JS 等资源。怎么本地快速启一个服务运行

背景 在使用 uni-app 开发项目时，路由跳转是极为频繁的操作，uni-app 提供的路由跳转 api uni.navigateTo够用但是却不够好用，主要问题在于，实际业务中经常涉及大量对象传参

下午茶时间，我给隔壁的后端老哥发了个链接。 他毫无防备地点开了。 三秒钟后，我听到他那台 16G 内存的 MacBook Pro 风扇开始狂啸，仿佛要起飞🤣。 五秒钟后，他的鼠标指针变成了彩虹圈，卡在

面试八股文，文章仅针对个人的薄弱处进行编写，有部分引用，文章单纯是为面试做准备，主要梳理面试核心考察点

2026最新研发Electron39.2+Vue3.5+DeepSeek-R1桌面客户端AI流式智能会话小帮手。

面试八股文，文章仅针对个人的薄弱处进行编写，有部分引用，文章单纯是为面试做准备，主要梳理面试核心考察点

手写高质量深拷贝：攻克循环引用、Symbol、WeakMap等核心难点 引言 在JavaScript开发中，拷贝数据是日常高频操作。浅拷贝仅能复制数据的表层结构

面试八股文，文章仅针对个人的薄弱处进行编写，有部分引用，文章单纯是为面试做准备，主要梳理面试核心考察点

NodeJs 做了什么 code node 代码实现 libuv 库代码实现 sync vs async non-blocking functions 非阻塞函数 async js ? 异步操作 线程

🧩 问题场景 你是否遇到过这样的情况？ 表单字段多达 200+，为了界面整洁，用 el-collapse或者其他技术分成「基本信息」「联系方式」「权限配置」等几个面板；

用智能家居被黑的故事，5分钟看懂 React2Shell 漏洞（CVSS 满分10分）。原型链污染如何导致远程代码执行？技术小白也能看懂的漏洞解析，附完整攻防代码示例和防御方案。

Pinia 数据跨组件共享机制与生命周期详解 引言 在现代前端开发中，状态管理是构建大型应用的核心技术。Pinia 作为 Vue 3 官方推荐的状态管理库，提供了简洁而强大的跨组件数据共享能力。本文将