Blazor是微软推出的用C#编写前端的Web框架，通过Blazor Server或Blazor WebAssembly两种运行时模型在浏览器中直接运行.NET代码，支持Razor组件、前后端共享模型与调试，但需深入理解SignalR、WASM内存、JS互操作等底层机制。
Blazor 是微软推出的、用 C# 写前端的 Web 框架，不是“又一个 JS 框架”，而是绕开 JavaScript 直接在浏览器里跑 .NET 代码的技术。它能让你用 Razor 语法写组件，用 C# 处理逻辑，前后端共享模型、验证规则、DTO，甚至调试器直接进浏览器里的 C# 方法——这点 Vue/React 做不到。
Blazor Server 和 Blazor WebAssembly 不是“两种写法”，而是两种运行时模型
选错托管模型，项目后期会卡在部署、延迟或离线能力上：
-
Blazor Server：UI 渲染全在服务器，靠SignalR推 DOM diff 到浏览器。首次加载快（ -
Blazor WebAssembly：.NET 运行时编译成WebAssembly，整个 App 下载到浏览器本地执行。首次加载慢（约 300–500KB 启动包），但完全离线可用，可打包为 PWA，也更容易部署到 CDN。 - 别指望“一套代码自动适配两种模式”——
NavigationManager、JSRuntime调用方式、状态管理策略都不同；HttpClient默认行为也得重配（比如 WASM 下不能用服务端 Cookie 认证）。
和 Vue/React 比，C# 的强类型不是“更安全”，而是“少写胶水代码”
Vue 的 v-model 和 Blazor 的 @bind-Value 看似一样，但背后差异很大：
- Vue 中
:rules="[{ required: true }]"是 JS 对象，类型靠文档或 TS 类型定义补全；Blazor 中[Required]是 C# 特性，校验逻辑直接嵌在实体类里，EditForm组件自动读取并触发 UI 反馈。 - Vue 的
props需手动定义类型（prop: { type: String, required: true }），Blazor 的组件参数是 C# 属性：[Parameter] public string Title { get; set; }，IDE 直接报错未赋值、类型不匹配。 - Vue 的
ref或defineComponent返回对象，TS 提示依赖 JSDoc 或defineComponent包装；Blazor 中@ref绑定的是强类型实例，InputText的CurrentValue就是string，点出来就是方法和事件。
别被“不用 JS”骗了：interop 仍是高频操作，但写法比 Vue/React 更重
调用第三方 JS 库（如 Chart.js、Mapbox）不可避免，但 Blazor 的 JS 互操作不是“加个 script 标签就完事”：
立即学习“前端免费学习笔记（深入）”；
-
IJSRuntime.InvokeAsync是异步的，不能像 Vue 的onMounted里直接new Chart()；必须等OnAfterRender或用StateHasChanged()手动触发重绘。 - JS 全局函数必须挂到
window上（如window.initChart = (id) => {...}），否则InvokeAsync找不到入口。 - 传复杂对象给 JS 时，Blazor 默认序列化为 JSON 字符串，JS 里要
JSON.parse；而 Vue/React 本就是 JS 生态，对象传递天然无缝。 - 反过来，JS 调 C#（如按钮点击触发 .NET 方法）要用
DotNet.invokeMethodAsync，且目标方法必须是static、带[JSInvokable]特性——这比 Vue 的$emit或 React 的回调 props 重得多。
Blazor 的真实门槛不在“会不会写 C#”，而在理解它如何与浏览器底层协作：SignalR 连接生命周期、WASM 内存模型、JS interop 的异步边界、以及调试时 Chrome DevTools 里看到的不是源码而是 WebAssembly 字节码。这些细节 Vue/React 开发者通常不用碰，但在 Blazor 里，漏掉一个 await 或错配一个托管模型，就会出现“页面不动”“状态丢失”“内存暴涨”这类难复现的问题。
