如何確保數(shù)組/對象中存儲的事件配置的唯一性？

發(fā)布時間：2025-11-11 文章來源：本站瀏覽次數(shù)：520

在 Vue 中確保數(shù)組 / 對象中存儲的事件配置唯一性，核心是 **“給每個事件配置分配唯一標識（ID），并通過 ID 管理配置的增刪改查，避免重復(fù)添加”**。以下是具體實現(xiàn)方法，覆蓋靜態(tài)配置和動態(tài)配置場景：

一、核心思路：給事件配置添加唯一標識

1. 使用 Symbol 作為唯一 ID

javascript

運行

const eventConfig = [
  {
    id: Symbol('click-event'),
    type: 'click',
    handler: handleClick
  },
  {
    id: Symbol('scroll-event'),
    type: 'scroll',
    handler: handleScroll
  }
];

2. 使用 UUID 作為唯一 ID

javascript

運行

import { v4 as uuidv4 } from 'uuid';

const eventConfig = [
  {
    id: uuidv4(),
    type: 'click',
    handler: handleClick
  }
];

3. 手動維護遞增 ID

javascript

運行

let eventId = 0;

function addEvent(type, handler) {
  eventConfig.push({
    id: ++eventId,
    type,
    handler
  });
}

二、確保唯一性的具體方法

1. 靜態(tài)配置：在定義時確保唯一

javascript

運行

// 錯誤示例：重復(fù)的事件配置
const eventConfig = [
  { type: 'click', handler: handleClick },
  { type: 'click', handler: handleClick } // 重復(fù)
];

// 正確示例：通過 ID 確保唯一
const eventConfig = [
  { id: 1, type: 'click', handler: handleClick },
  { id: 2, type: 'scroll', handler: handleScroll }
];

2. 動態(tài)配置：添加時檢查唯一性

javascript

運行

function addUniqueEvent(type, handler) {
  // 檢查是否已存在相同的事件配置
  const exists = eventConfig.some(
    event => event.type === type && event.handler === handler
  );

  if (!exists) {
    eventConfig.push({
      id: Date.now(), // 使用時間戳作為唯一 ID
      type,
      handler
    });
  }
}

3. 使用 Map 存儲事件配置

javascript

運行

const eventMap = new Map();

// 添加事件配置
function addEvent(type, handler) {
  const key = `${type}-${handler.name}`; // 或使用 Symbol
  if (!eventMap.has(key)) {
    eventMap.set(key, { type, handler });
  }
}

// 獲取所有事件配置
function getEvents() {
  return Array.from(eventMap.values());
}

三、在 Vue 組件中實踐

示例：使用 UUID 管理事件配置

vue











<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { v4 as uuidv4 } from 'uuid';

const boxRef = ref(null);
const eventConfig = ref([]);

// 定義事件處理函數(shù)
function handleClick() { /* ... */ }
function handleScroll() { /* ... */ }

// 添加唯一事件配置
function addEvent(type, handler) {
  const id = uuidv4();
  eventConfig.value.push({ id, type, handler });
}

// 初始化事件配置
addEvent('click', handleClick);
addEvent('scroll', handleScroll);

// 綁定事件
onMounted(() => {
  eventConfig.value.forEach(({ type, handler }) => {
    boxRef.value.addEventListener(type, handler);
  });
});

// 移除事件
onUnmounted(() => {
  eventConfig.value.forEach(({ type, handler }) => {
    boxRef.value.removeEventListener(type, handler);
  });
});
</script>

四、避坑指南

不要使用匿名函數(shù)

javascript

  運行

  // 錯誤：匿名函數(shù)無法判斷唯一性
addEvent('click', () => console.log('click'));

// 正確：使用具名函數(shù)
function handleClick() { console.log('click'); }
addEvent('click', handleClick);

避免重復(fù)綁定同一事件

javascript

  運行

  // 在添加事件前檢查是否已存在
function addEventIfNotExists(type, handler) {
  const exists = eventConfig.some(
    event => event.type === type && event.handler === handler
  );
  if (!exists) {
    eventConfig.push({ type, handler });
  }
}

使用不可變數(shù)據(jù)結(jié)構(gòu)

javascript

  運行

  // 使用 spread 運算符避免直接修改原數(shù)組
function addEvent(type, handler) {
  eventConfig.value = [...eventConfig.value, { type, handler }];
}

五、總結(jié)

確保數(shù)組 / 對象中事件配置的唯一性，關(guān)鍵在于給每個配置項分配唯一標識（如 Symbol、UUID、遞增 ID），并在添加時檢查是否已存在。這樣可以避免重復(fù)綁定事件，確保后續(xù)移除時能準確匹配，從而有效防止內(nèi)存泄漏。

上一條：使用Symbol作為唯一...

下一條：在 Vue 中，如何確保...