一、直接在創(chuàng)建時(shí)添加描述符

// 創(chuàng)建一個(gè)帶有描述符的 Symbol
const mySymbol = Symbol('這是我的 Symbol');

console.log(mySymbol); 
// 輸出: Symbol(這是我的 Symbol)
console.log(mySymbol.description); 
// 輸出: "這是我的 Symbol"

在 Vue 組件中使用

Vue 3 (組合式 API)

<script setup>
import { ref } from 'vue';

// 1. 定義一個(gè)帶有描述符的 Symbol
const LOGIN_EVENT = Symbol('用戶登錄事件');
const LOGOUT_EVENT = Symbol('用戶登出事件');

const events = ref([
  {
    id: LOGIN_EVENT,
    type: 'login',
    handler: () => console.log('處理登錄邏輯')
  },
  {
    id: LOGOUT_EVENT,
    type: 'logout',
    handler: () => console.log('處理登出邏輯')
  }
]);

// 打印出來看看
console.log(events.value[0].id); // 輸出: Symbol(用戶登錄事件)
</script>

Vue 2 (選項(xiàng)式 API)

<script>
export default {
  data() {
    return {
      // 在 data 中定義
      events: [
        {
          id: Symbol('用戶登錄事件'),
          type: 'login',
          handler: () => console.log('處理登錄邏輯')
        }
      ]
    };
  },
  created() {
    // 或者在 created 鉤子中定義
    const anotherEvent = Symbol('另一個(gè)事件');
    console.log(anotherEvent.description); // 輸出: "另一個(gè)事件"
  }
};
</script>

二、通過 Symbol.for() 創(chuàng)建并添加描述符

// 創(chuàng)建或獲取一個(gè)帶有描述符 "user-click" 的 Symbol
const clickSymbol = Symbol.for('user-click');

console.log(clickSymbol); 
// 輸出: Symbol(user-click)
console.log(clickSymbol.description); 
// 輸出: "user-click"

// 再次調(diào)用會返回同一個(gè) Symbol
const sameClickSymbol = Symbol.for('user-click');
console.log(clickSymbol === sameClickSymbol); 
// 輸出: true

三、為已有 Symbol 添加或修改描述符

const mySymbol = Symbol('舊的描述符');
mySymbol.description = '新的描述符'; // 這行代碼無效，不會報(bào)錯(cuò)，但也不會生效
console.log(mySymbol.description); // 輸出: "舊的描述符"

let mySymbol = Symbol('舊的描述符');

// "修改" 描述符的方法
function updateSymbolDescription(oldSymbol, newDescription) {
  // 可以根據(jù)舊 Symbol 的某些邏輯來決定新的描述符
  return Symbol(newDescription);
}

mySymbol = updateSymbolDescription(mySymbol, '新的描述符');
console.log(mySymbol.description); // 輸出: "新的描述符"

四、佳實(shí)踐與總結(jié)

1. 提高代碼可讀性和可維護(hù)性：
   javascript

   運(yùn)行

   // 不好的方式
   const handler = {};
   handler[Symbol()] = () => { /* ... */ }; // 難以理解這個(gè) Symbol 的用途
   
   // 好的方式
   const USER_SELECTED_ITEM = Symbol('用戶選擇了列表項(xiàng)');
   handler[USER_SELECTED_ITEM] = () => { /* ... */ }; // 意圖清晰
   
2. 方便調(diào)試：當(dāng)你在控制臺打印一個(gè)帶有描述符的 Symbol 時(shí)，你能立刻知道它代表什么，這對于追蹤 bug 非常有幫助。
3. 集中管理 Symbol：在大型項(xiàng)目中，建議將所有用于事件 ID、唯一鍵名等的 Symbol 集中定義在一個(gè)或幾個(gè)文件中，并附上清晰的描述。
   javascript

   運(yùn)行

   // src/constants/symbols.js
   export const SYMBOLS = {
     /**
      * @description 觸發(fā)用戶登錄的事件ID
      */
     EVENT_LOGIN: Symbol('event-login'),
     
     /**
      * @description 用于緩存用戶數(shù)據(jù)的唯一鍵
      */
     CACHE_KEY_USER_DATA: Symbol('cache-key-user-data')
   };
   
4. 注意 Symbol 的唯一性：即使兩個(gè) Symbol 擁有相同的描述符，它們也是不相等的。
   javascript

   運(yùn)行

   const sym1 = Symbol('test');
   const sym2 = Symbol('test');
   console.log(sym1 === sym2); // 輸出: false