圖片

1. vue 開(kāi)發(fā)中，props 使用時(shí)候的注意點(diǎn)

在 Vue 開(kāi)發(fā)中，正確地使用 props 對(duì)于構(gòu)建高效、可維護(hù)的組件至關(guān)重要。

以下是一些在使用 props 時(shí)需要注意的關(guān)鍵點(diǎn)：

1.1. 單向數(shù)據(jù)流

• 原則：數(shù)據(jù)只能從父組件流向子組件，不能反向流動(dòng)。
• 原因：?jiǎn)蜗驍?shù)據(jù)流有助于保持組件之間的數(shù)據(jù)獨(dú)立性和可預(yù)測(cè)性，減少不必要的副作用，便于調(diào)試和維護(hù)。

1.2. 類型檢查

• 定義類型：使用 type 屬性來(lái)定義 prop 的類型，確保傳入的數(shù)據(jù)符合預(yù)期。

props: {
  title: String,
  count: Number,
  isActive: Boolean,
  user: Object,
  items: Array,
  callback: Function
}

• 復(fù)雜類型：對(duì)于復(fù)雜類型（如對(duì)象或數(shù)組），可以使用 TypeScript 進(jìn)行更嚴(yán)格的類型檢查。

1.3. 默認(rèn)值

• 設(shè)置默認(rèn)值：使用 default 屬性為 prop 提供默認(rèn)值，防止未傳遞時(shí)出現(xiàn)錯(cuò)誤。

props: {
  title: {
    type: String,
    default: 'Default Title'
  },
  items: {
    type: Array,
    default: () => []
  }
}

• 注意：對(duì)于數(shù)組和對(duì)象，默認(rèn)值應(yīng)該是函數(shù)返回的值，以避免所有實(shí)例共享同一個(gè)默認(rèn)值。

1.4. 只讀性

• 不可修改：props 應(yīng)被視為只讀的，避免在子組件中直接修改 props。

// 錯(cuò)誤做法
props.title = "New Title"; // 不要這樣做

// 正確做法
const localTitle = ref(props.title);

• 原因：直接修改 props 會(huì)導(dǎo)致難以追蹤的 bug，破壞單向數(shù)據(jù)流的原則。

1.5. 驗(yàn)證

• 自定義驗(yàn)證：使用 validator 屬性進(jìn)行自定義驗(yàn)證。

props: {
  status: {
    type: String,
    validator: function (value) {
      return ['active', 'inactive', 'pending'].includes(value);
    }
  }
}

1.6. 命名約定

• 清晰命名：使用有意義的名稱，避免模糊不清的命名。

// 不推薦
props: {
  data: Object;
}

// 推薦
props: {
  user: Object;
}

1.7. 性能優(yōu)化

• 避免不必要的傳遞：只傳遞必要的 props，避免過(guò)度傳遞導(dǎo)致的性能問(wèn)題。
• 使用 v-bind 動(dòng)態(tài)綁定：使用 v-bind 動(dòng)態(tài)綁定 props，提高代碼的靈活性。

<ChildComponent v-bind="childProps" />

1.8. 事件通信

• 使用事件：通過(guò) $emit 發(fā)送事件，實(shí)現(xiàn)子組件與父組件的通信。

<!-- 子組件 -->
<button @click="$emit('update-title', 'New Title')">Update Title</button>

<!-- 父組件 -->
<ChildComponent @update-title="handleTitleUpdate" />

1.9. TypeScript 支持

• 類型安全：使用 TypeScript 可以提供更強(qiáng)的類型檢查和更好的開(kāi)發(fā)體驗(yàn)。

import { defineProps } from "vue";

interface Props {
  title: string;
  count: number;
}

const props = defineProps<Props>();

1.10. 文檔化

• 文檔注釋：在組件中添加文檔注釋，說(shuō)明每個(gè) prop 的用途和預(yù)期值。

/**
 * 標(biāo)題
 * @type {String}
 * @default 'Default Title'
 */
title: {
  type: String,
  default: 'Default Title'
}

通過(guò)遵循這些最佳實(shí)踐，可以確保在 Vue 開(kāi)發(fā)中正確、高效地使用 props，從而構(gòu)建出更加健壯和可維護(hù)的應(yīng)用程序。