一、Vue3 條件語句

在 Vue 3 中，你可以使用條件語句來動態地控制模板中的渲染內容。Vue 提供了多種方式來實現條件渲染，包括 v-if、v-else-if、v-else 和 v-show 指令。

1. v-if

v-if 指令用于根據條件來渲染一個元素或組件。如果條件為真，元素或組件會被渲染到 DOM 中；如果條件為假，元素或組件不會被渲染。

<template><div><p v-if="isVisible">這段文字將會顯示</p></div>
</template><script>
export default {data() {return {isVisible: true};}
};
</script>

在這個例子中，isVisible 是一個布爾值，當它為 true 時，<p> 元素會被渲染到 DOM 中；當它為 false 時，<p> 元素不會被渲染。

2. v-else-if 和 v-else

你可以使用 v-else-if 和 v-else 來添加額外的條件。

<template><div><p v-if="score > 90">優秀</p><p v-else-if="score > 60">及格</p><p v-else>不及格</p></div>
</template><script>
export default {data() {return {score: 80};}
};
</script>

在這個例子中，根據 score 的值，不同的 <p> 元素會被渲染。

3. v-show

v-show 指令與 v-if 類似，但它不會基于條件來添加或移除元素，而是簡單地切換元素的 CSS 的 display 屬性。這意味著即使元素被隱藏，它仍然會保留在 DOM 中。

<template><div><p v-show="isVisible">這段文字將會根據條件顯示或隱藏</p></div>
</template><script>
export default {data() {return {isVisible: false};}
};
</script>

在這個例子中，當 isVisible 為 true 時，<p> 元素會顯示；當為 false 時，<p> 元素會被隱藏，但它的 DOM 元素仍然存在。

4. 使用計算屬性進行條件渲染

對于更復雜的條件邏輯，你可以使用計算屬性來返回一個布爾值，并在模板中使用這個布爾值來決定是否渲染某個元素。

<template><div><p v-if="shouldShowMessage">這是一個消息</p></div>
</template><script>
export default {data() {return {userLevel: 2};},computed: {shouldShowMessage() {return this.userLevel >= 2;}}
};
</script>

在這個例子中，shouldShowMessage 是一個計算屬性，它返回一個布爾值，表示是否應該顯示消息。

5. v-if與v-show比較

在 Vue 3 中，v-if 和 v-show 都用于條件性地渲染元素，但它們在實現方式和性能上有一些區別。

v-if

v-if 是一個“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。v-if 是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

特點：

• 條件為假時，不會渲染元素到 DOM 中。
• 每次條件改變都會銷毀和重建元素及其子組件，包括所有的事件監聽器。
• 條件為假時，不會有任何性能開銷，因為 DOM 中沒有對應的元素。
• 更加適合不頻繁切換的條件渲染。

v-show

v-show 就簡單得多——不論初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。

特點：

• 無論條件真假，元素都會被渲染到 DOM 中。
• 條件為假時，通過 CSS 設置 display 屬性為 none 來隱藏元素。
• 條件改變時，元素只是簡單地從可見變為不可見，不會有銷毀和重建的開銷。
• 適合頻繁切換的條件渲染。

性能考慮

如果你非常關心性能，并且條件不頻繁切換，使用 v-if 會更好，因為這樣可以避免不必要的渲染和銷毀/重建的開銷。然而，如果條件頻繁切換，使用 v-show 會更好，因為它只是簡單地切換 CSS 屬性，而不會涉及組件的銷毀和重建。

使用場景

• 如果一個元素需要非常頻繁地切換，使用 v-show 會更好。
• 如果在運行時條件不太可能改變，或者元素非常重（有很多子組件或監聽器），使用 v-if 更好。

在實際應用中，可以根據具體的需求來選擇使用 v-if 還是 v-show。在大多數情況下，Vue 的優化足以讓這兩種方式在性能上相差無幾，因此選擇哪種方式更多是基于代碼的可讀性和維護性的考慮。

二、Vue3 循環語句

在 Vue.js 中，你可以使用 v-for 指令來執行循環操作，遍歷數組或對象，并基于每個元素或屬性渲染一個模板塊。

1. 遍歷數組

使用 v-for 指令遍歷數組時，你可以指定一個別名來代表當前元素，并使用 in 關鍵字來指定要遍歷的數組。

<template><div><ul><li v-for="item in items" :key="item.id">{{ item.text }}</li></ul></div>
</template><script>
export default {data() {return {items: [{ id: 1, text: 'Item 1' },{ id: 2, text: 'Item 2' },{ id: 3, text: 'Item 3' }]};}
};
</script>

在這個例子中，items 是一個包含對象的數組，我們使用 v-for="item in items" 來遍歷這個數組，并為每個對象渲染一個 <li> 元素。:key="item.id" 是用來跟蹤每個節點的身份，從而重用和重新排序現有元素。

2. 遍歷對象

你也可以使用 v-for 來遍歷對象的屬性。

<template><div><ul><li v-for="(value, name, index) in object" :key="index">{{ name }}: {{ value }}</li></ul></div>
</template><script>
export default {data() {return {object: {firstName: 'John',lastName: 'Doe',age: 30}};}
};
</script>

在這個例子中，object 是一個包含屬性的對象。v-for="(value, name, index) in object" 遍歷這個對象的每個屬性，并輸出屬性的名稱和值。

3. 使用索引

在遍歷數組時，你還可以使用第三個參數來獲取當前元素的索引。

<template><div><ul><li v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item.text }}</li></ul></div>
</template><script>
export default {data() {return {items: [{ text: 'Item 1' },{ text: 'Item 2' },{ text: 'Item 3' }]};}
};
</script>

在這個例子中，我們使用 v-for="(item, index) in items" 來同時獲取當前元素和它的索引，然后在列表項中顯示索引和文本。

4. 注意事項

• 當使用 v-for 時，每個節點必須有一個唯一的 key 屬性，這有助于 Vue.js 跟蹤每個節點的身份，從而實現高效的 DOM 更新。
• 盡量避免在同一元素上同時使用 v-if 和 v-for，因為這可能會導致渲染錯誤。如果確實需要條件渲染，可以考慮將元素包裹在一個父元素中，并在父元素上使用 v-if。
• 當遍歷的對象或數組發生變化時，Vue.js 會自動更新 DOM 以反映這些變化。

三、相關鏈接

1. Vue3官方地址
2. Vue3中文文檔
3. 「Vue3系列」Vue3簡介及安裝
4. 「Vue3系列」Vue3起步/創建項目
5. 「Vue3系列」Vue3指令
6. 「Vue3系列」Vue3 模板語法