一、Vue和Blazor的組件結構示例
1、Vue，以下案例文件名為Index.vue
//（1）視圖層-HTML
<template>
<h1>{{ sayHi }}</h1>
</template>
//（2）邏輯層-JS
//以下代碼使用組合式API（Composition API）的setup語法糖
<script setup>
import { ref } from 'vue'
const sayHi = ref('你好！')
</script>
//（3）樣式層-CSS
//scoped實現樣式隔離，防止組件之間樣式名稱的污染
//在樣式隔離情況下，如果希望樣式傳遞給子組件，可以使用樣式穿透（深綁定），如【:deep(.MyClassName){...}】
<style scoped>
h1 {
font-weight: bold;
}
</style>
2、Blazor，以下案例文件名為Index.razor
//組件類定義
@page "/index"
......
//（1）視圖層-HTML
<div>
<h1>@SayHi</h1>
</div>
//（2）邏輯層-C#
@code{
privite string SayHi { get; set; } = "你好";
private void UpdateTitle()
{
Title = "Hello, Blazor!";
}
}
//（3）樣式層-CSS
//如果要實現樣式隔離，可以新建同名CSS樣式文件。如組件為Index.razor，則新建Index.razor.css
//在樣式隔離情況下，如果希望樣式傳遞給子組件，可以使用深綁定，如【::deep .MyClassName{...}】
<style>
h1 {
font-weight: bold;
}
</style>
二、Vue和Blazor的組件結構對比
1、相同點
- 組件遵循單文件結構，即HTML（視圖）、JS/C#（邏輯）、CSS（樣式），寫在一個文件里，文件結構非常相似。
2、異同點
- 視圖層：
- Vue：根標簽必須使用template，有且只有一個根標簽。可以使用HTML原生元素、第三方組件或自定義組件。在視圖層中，可以使用Vue提供的模板語法和指令，實現數據綁定等功能。
- Blazor：對根標簽無任何要求。可以使用HTML原生元素、第三方組件或自定義組件。在視圖層中，使用Blazor提供的Razor語法，實現數據綁定等功能，Razor語法比Vue的模板語法更加靈活，接近於React的JSX。
- 邏輯層：
- Vue：使用JS或TS，代碼邏輯寫在標簽中，有選項式API和組合式API兩者寫法，本系列均使用組件式API及setup語法糖。
- Blazor：使用C#，代碼邏輯寫在@code{}代碼塊中，本質上是一個部分類。
- 樣式層：
- Vue：在標簽中寫CSS樣式，使用方式與CSS3基本一致。
- Blazor：也在標簽中寫CSS樣式，使用方式也與CSS3基本一致。
3、關於組件本質（以下分析非常重要）
- Vue的組件本質是一個對象（通過選項式API來看Vue組件本質）:
- 視圖層是屬性template的值。
- date()方法返回響應式數據。
- methods屬性中，定義方法。
- computed屬性中，定義計算屬性（本質是方法）。
- 同時還提供了生命周期函數等方法或屬性。
- 在視圖層中調用定義好的組件時，如
<MyCommpont />，實質是以組件對象為模板創建這個對象的實例。 - 組合式API可以視為是選項式API的語法糖，使我們可以更加流暢的進行組件開發。
- Blazor的組件本質是一個類：
- 組件頭部以@符號開頭的指令，如@page、@implements等，定義類的特性、繼承、實現、泛型、依賴注入等行為。
- 視圖層是類的一個特殊方法，在方法內部，C#和標簽元素可以混寫，也可以訪問類的其它成員，類似於React/JSX。
- 在@code{}中，定義類的其它成員，可以是字段、屬性或者方法。
- 在視圖層中調用定義好的組件時，如
<MyCommpont />，實質是創建這個類的實例。
4、關於文件分離（僅適用於Blazor）
- Blazor可以實現視圖層、代碼層和樣式層三者的分離。如在相同文件夾下，創建Index.razor、Index.razor.cs、Index.razor.css，即可實現組件的文件分離。在Visual Studio的項目管理中，這三個文件會自動組織排列在一起。
- Index.razor.cs，需要創建為部分類
- Index.razor.css，分離出來后，即實現了樣式隔離
- Index.razor.js，如有與js的互操作，還可以創建組件作用域的js文件