淺析Vue中defineProps的解構(gòu)和不解構(gòu)

更新時(shí)間：2025年02月05日 09:07:45 作者：百錦再@新空間代碼工作室

defineProps?是?Vue?3?Composition?API?中用來聲明組件接收的?props?的方法,本文主要為大家介紹了defineProps的解構(gòu)和不解構(gòu),感興趣的可以了解下

1. defineProps 的基本用法

defineProps 是 Vue 3 Composition API 中用來聲明組件接收的 props 的方法。它的基本作用是定義組件的輸入數(shù)據(jù)（即從父組件傳遞過來的數(shù)據(jù)）。

在 Vue 3 中，通過 defineProps 定義的 props 會自動具備響應(yīng)式特性，因此可以在 setup 函數(shù)中直接使用，而無需額外的 this 關(guān)鍵字。

基本用法示例：

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

const props = defineProps({
  title: String,
  count: Number
});
</script>

<template>
  <div>
    <h1>{{ props.title }}</h1>
    <p>{{ props.count }}</p>
  </div>
</template>

在這個(gè)例子中，我們通過 defineProps 聲明了兩個(gè) props：title 和 count，并在模板中直接使用 props.title 和 props.count。

自動解構(gòu)功能

當(dāng)使用 defineProps 時(shí)，Vue 會自動將 props 對象解構(gòu)，使得我們可以直接在模板中訪問單獨(dú)的 props，而不需要顯式地引用 props 對象。

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

const { title, count } = defineProps({
  title: String,
  count: Number
});
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ count }}</p>
  </div>
</template>

這種解構(gòu)方式可以讓代碼看起來更加簡潔，但它背后卻有一些隱含的細(xì)節(jié)，尤其是在更復(fù)雜的場景中，可能會影響性能、可維護(hù)性和調(diào)試。

2. 解構(gòu) defineProps 的使用方式

2.1 解構(gòu)的定義

解構(gòu)是指將一個(gè)對象或數(shù)組的各個(gè)屬性或元素提取到單獨(dú)的變量中。通過解構(gòu)，您可以更簡潔地訪問對象的屬性。對于 defineProps 來說，解構(gòu)意味著你將 props 對象的屬性提取成單獨(dú)的變量，這樣可以直接在 setup 中使用這些變量，而不需要通過 props.xxx 的方式訪問。

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

const { title, count } = defineProps({
  title: String,
  count: Number
});
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ count }}</p>
  </div>
</template>

2.2 解構(gòu)的優(yōu)點(diǎn)

代碼簡潔：解構(gòu)后的代碼更加簡潔，減少了對 props 對象的引用，直接使用解構(gòu)后的變量可以讓代碼看起來更清晰。

提高可讀性：通過解構(gòu)，你可以直接看到所需要的 props，而不需要查找整個(gè) props 對象，這樣在多個(gè)地方使用 props 時(shí)更加直觀。

更符合 JavaScript 的慣用法：解構(gòu)是現(xiàn)代 JavaScript 中的一個(gè)重要特性，它允許開發(fā)者更加優(yōu)雅地提取對象或數(shù)組中的值。

2.3 解構(gòu)的缺點(diǎn)

不易追蹤的響應(yīng)式：解構(gòu)的變量是從響應(yīng)式對象中提取的，這意味著解構(gòu)后的變量仍然是響應(yīng)式的，但 Vue 的響應(yīng)式機(jī)制會使得你可能失去對這些變量的追蹤。當(dāng)你在 setup 中解構(gòu) props 時(shí)，Vue 無法自動確定哪個(gè)變量是響應(yīng)式的，可能導(dǎo)致意外的行為，尤其是當(dāng)你在 setup 外部或者外部函數(shù)中修改解構(gòu)后的變量時(shí)。

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

const { title } = defineProps({
  title: String
});

setTimeout(() => {
  title = 'New Title';  // 不會觸發(fā)視圖更新
}, 1000);
</script>

在上面的例子中，由于 title 已經(jīng)被解構(gòu)，它失去了與原始 props 的綁定。此時(shí)修改 title 不會觸發(fā)視圖更新。

無法解構(gòu)計(jì)算屬性或復(fù)雜對象：如果傳入的 props 是一個(gè)復(fù)雜對象或者計(jì)算屬性，你可能需要保留原始的 props 對象，而不能直接解構(gòu)，因?yàn)?Vue 的響應(yīng)式系統(tǒng)需要追蹤對象的變化。

3. 不解構(gòu) defineProps 的使用方式

3.1 不解構(gòu)的定義

與解構(gòu)相比，不解構(gòu)意味著直接訪問 props 對象中的屬性。在 setup 函數(shù)中，你可以直接通過 props.title 或 props.count 的方式訪問 props，而不是通過解構(gòu)賦值。

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

const props = defineProps({
  title: String,
  count: Number
});
</script>

<template>
  <div>
    <h1>{{ props.title }}</h1>
    <p>{{ props.count }}</p>
  </div>
</template>

3.2 不解構(gòu)的優(yōu)點(diǎn)

響應(yīng)式綁定明確：由于沒有解構(gòu)，props 變量始終保持完整的響應(yīng)式狀態(tài)，因此你可以更容易地追蹤數(shù)據(jù)的變化，尤其是當(dāng)數(shù)據(jù)變化需要影響多個(gè)地方時(shí)。

確保數(shù)據(jù)一致性：通過直接訪問 props 對象，你始終能夠訪問到整個(gè)對象，這對于復(fù)雜數(shù)據(jù)或嵌套對象尤為重要。即使在異步操作中，修改 props 對象的某些屬性也會立即反映到視圖中。

便于調(diào)試：不解構(gòu)時(shí)，你可以更清楚地看到 props 的整個(gè)結(jié)構(gòu)，便于調(diào)試和跟蹤數(shù)據(jù)流向。

3.3 不解構(gòu)的缺點(diǎn)

代碼冗長：每次訪問 props 的時(shí)候，都需要寫 props.xxx，這會讓代碼變得更冗長，尤其在模板中使用多個(gè) props 時(shí)，可能導(dǎo)致代碼變得不夠簡潔。
缺乏解構(gòu)帶來的便捷性：如果你只需要 props 中的某幾個(gè)值，使用 props.xxx 的方式會比解構(gòu)顯得冗長，影響代碼的可讀性。

4. 解構(gòu)與不解構(gòu)的性能差異

從性能角度來看，解構(gòu)和不解構(gòu)在 Vue 3 中的差異并不會對渲染性能產(chǎn)生顯著影響。Vue 3 的響應(yīng)式系統(tǒng)基于 Proxy，因此解構(gòu)后的屬性仍然是響應(yīng)式的，性能差異主要體現(xiàn)在以下幾個(gè)方面：

內(nèi)存開銷：解構(gòu)時(shí)，Vue 會為每個(gè)解構(gòu)的屬性創(chuàng)建新的變量，這可能會導(dǎo)致稍微增加內(nèi)存開銷。但這種增加的開銷通常是微不足道的。

響應(yīng)式系統(tǒng)的跟蹤：在某些場景下，不解構(gòu)可能有更高的性能，因?yàn)?Vue 會直接追蹤 props 對象的變化，而解構(gòu)則可能會使得 Vue 無法有效追蹤到每個(gè)解構(gòu)后的變量的變化。

然而，通常這類性能差異是可以忽略不計(jì)的，除非你在組件中有大量的 props，且頻繁進(jìn)行復(fù)雜的響應(yīng)式操作。

5. 解構(gòu)與不解構(gòu)對類型推導(dǎo)的影響

在 TypeScript 中，defineProps 結(jié)合解構(gòu)或不解構(gòu)時(shí)，類型推導(dǎo)的表現(xiàn)也有所不同。

解構(gòu)時(shí)的類型推導(dǎo)

當(dāng)使用解構(gòu)時(shí)，TypeScript 無法推導(dǎo)出整個(gè) props 對象的類型，而是只能推導(dǎo)出解構(gòu)后變量的類型。因此，在某些復(fù)雜的類型推導(dǎo)場景下，可能會出現(xiàn)類型不匹配或推導(dǎo)失敗的情況。

<script setup lang="ts">
import { defineProps } from

 'vue';

const { title } = defineProps({
  title: String,
  count: Number
});
</script>

在上面的例子中，title 會被推導(dǎo)為 string | undefined，但 TypeScript 無法推導(dǎo)出 props 對象的類型。

不解構(gòu)時(shí)的類型推導(dǎo)

不解構(gòu)時(shí)，defineProps 返回的是一個(gè)完整的響應(yīng)式對象，因此 TypeScript 可以準(zhǔn)確推導(dǎo)出整個(gè) props 對象的類型。

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

const props = defineProps({
  title: String,
  count: Number
});

type Props = typeof props;  // 推導(dǎo)出 props 的類型
</script>

這種方式能保證 props 對象的類型在 TypeScript 中得到完整推導(dǎo)，有助于開發(fā)時(shí)的類型安全和代碼提示。