Vue使用模板语法，Blazor使用祖传的Razor语法，从逻辑和方向上看，两者极为相似，比如：
- 都基于HTML
- 都通过声明式地将组件实例的状态（数据/方法）绑定到呈现的DOM上
- 都通过指令实现更加丰富的视图/HTML与逻辑/JS和C#的互动应用
- 底层机制都是通过虚拟DOM，实现差量更新
- 工程组建方式都基于组件树
- 都具有单文件组件特征
但在具体实现和语法上，两者有比较大的差异。给人的总体感觉就是，都很熟悉，但就是不太一样。以下仅对语法基础进行逐点比较，内容较多，目录如下：
- 标签内容绑定（单向）
- 标签属性绑定（单向）
- 控制结构（判断/循环等）
- 指令体系概述
- 补充：Vue的响应式约束
1、标签内容绑定（单向）
这是最基本的数据绑定形式，可以实现HTML标签体内容和逻辑代码的动态绑定。【单向】更新逻辑代码时，标签内容会自动更新。Vue和Blazor的标签体内容绑定语法如下所示：
- Vue使用双大括号，{{ /*这里是JS表达式*/ }}，如{{ number+1 }}
- Blazor使用@符，@/*这里是C#表达式*/，如@(number+1)，这里需要使用（）显示标注表达式
- 注：表达式可以使用常量、变量、方法调用、API调用、运算符的任意合法组合
（1）最简单的变量
//Vue===================================== <template> <span>Message: {{ msg }}</span> </template> <script setup> import { ref } form ‘vue’; const msg = ref(‘你好，我是functonMC’); </script> //Blazor==================================== <span>Message: @msg</span> @code { private string msg = “你好，我是functonMC”; }
（2）运算表达式
//Vue===================================== <template> <span>结果是：{{ number + 1 }}</span> </template> <script setup> import { ref } from "vue"; const number = ref(10); </script> //Blazor==================================== <span>@(number+1)</span> @code { private int number = 10; }
（3）调用API的表达式
//Vue===================================== <template> <span>{{ message.split("").reverse().join("") }}</span> </template> <script setup> import { ref } from "vue"; const message = ref("Hello,functionMC"); </script> //Blazor==================================== <span>@(string.Join("",message.ToCharArray().Reverse().ToArray()))</span> @code { private string message = "Hello,functionMC"; }
（4）三元表达式
//Vue===================================== <template> <span>{{ ok ? "好的" : "不行" }}</span> </template> <script setup> import { ref } from "vue"; const ok = ref(true); </script> //Blazor==================================== <span>@(ok?"好的":"不行")</span> @code { private string message = "Hello,functionMC"; }
（5）方法调用
//Vue===================================== <template> <span>{{ addResult(1, 2) }}</span> </template> <script setup> function addResult(a, b) { return a + b; } </script> //Blazor=================================== <span>@AddResult(1,2)</span> @code { private int AddResult(int a,int b) { return a + b; } }
2、标签属性绑定（单向）
和标签体内容绑定一样，标签属性也可以绑定逻辑代码，可以使用常量、变量、方法调用、API调用、运算符的任意合法组合的表达式。Vue需要使用v-bind指令（可以简写为冒号），Blazor仍然使用@符，表达式的使用“标签内容”绑定基本一致。两者的语法如下所示：
- Vue：<span v-bind:title=”newsTitle”></span>，简写为<span :title=”newsTitle”></span>
- Blazor：<span title=”@newsTitle”></span>，可以省略引号为<span title=@newsTitle></span>
可以注意到Vue的冒号和Blazor@符所在位置的区别。所以在Blazor中，你是很容易区别指令、标签属性绑定和标签内容绑定三者的区别的，比如style=”@TitleStyle”是标签属性绑定，@key=”people.Id”是指令key。而在Vue中，这并不好区别，如:style=”titleStyle”是标签属性绑定，:key=”people.id”是指令呢？还是属性绑定呢？虽然这种区分，然并卵，但你能感觉到Blazor有着C#的严谨支撑，整个组件体系，也是基于C#的语法体系，Razor和C#之间是很容易打通的，源码比较容易看懂。而Vue在灵活的JS之上又做了一层抽象，总让人感到失去了语言的一惯性，现在的组合式API会好点，Vue2时代的选项式API，这种感觉更甚，甚至有人说，学了Vue后，都快忘了JS了。
言归正传，标签属性绑定的应用，主要涉及到样式绑定、表单组件的双向绑定、父子组件的数据传递、以及指令体系，每个在后续都会另起章节详述，所以暂且略过！
3、控制结构（条件/循环）
这里的控制结构，主要指DOM结构的条件渲染和循环渲染。Vue需要使用指令来完成，用于条件的v-if/v-else-if/v-else/v-show，用于循环的v-for；而Blazor则灵活很多，因为在Blazor中，html和C#可以混写，所以你就感觉是在写C#一样，这和react倒是很像。
（1）条件渲染
//Vue中使用v-if=============================== //根据绑定的type值，只渲染判断为true的DOM节点，其它全部干掉。如果type值在运行时频繁改变，开销将比较大，这种情况推荐使用v-show <template> <div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else>Not A/B/C</div> </template> <script setup> import { ref } from "vue"; const type = ref("B"); </script> //Vue中使用v-show============================= //使用v-show时，所有节点都有渲染，只是改变的style的display属性，所以运行时频繁改变type值时，开销会少很多。 <template> <div v-show="type === 'A'">A</div> <div v-show="type === 'B'">B</div> <div v-show="type === 'C'">C</div> <div v-show="!(type==='A'||type==='B'||type==='C')">Not A/B/C</div> </template> <script setup> import { ref } from "vue"; const type = ref("B"); </script> //Blazor中使用if=============================== @if (type == "A") { <div>A</div> } else if (type == "B") { <div>B</div> } else if (type == "C") { <div>C</div> } else { <div>not A/B/C</div> } @code { private string type = "g"; } //Blazor中使用switch============================ @switch (type) { case "A": <div>A</div> break; case "B": <div>B</div> break; case "C": <div>C</div> break; default: <div>not A/B/C</div> break; } @code { private string type = "g"; } //Blazor中实现类似Vue的v-show===================== <div style="display:@((type=="A")?"inline":"none")">A</div> <div style="display:@((type=="B")?"inline":"none")">B</div> <div style="display:@((type=="C")?"inline":"none")">C</div> <div style="display:@(!(type=="A"||type=="B"||type=="C")?"inline":"none")">not A/B/C</div> @code { private string type = "A"; }
（2）循环渲染
//Vue使用v-for指令============================= //可以循环渲染数组和类数组，类数组包括了对象、字符串、整数等 <template> //循环对象数组，同时拿到索引。也可以v-for=“item in items1" <li v-for="(item, index) in items1" :key="item.id"> {{ index + 1 }}-{{ item.name }} </li> //循环对象，按顺序拿到value,key和index <li v-for="(value, key, index) in items2" :key="key"> {{ key }}-{{ value }}-{{ index }} </li> //循环一个整数 <li v-for="n in 10" :key="n"> {{ n }} </li> //循环一个字符串 <li v-for="n in 'hello,functionMC'" :key="n"> {{ n }} </li> </template> <script setup> import { ref } from "vue"; const items1 = ref([ { id: 1, name: "ZhangSan", age: 18 }, { id: 2, name: "LiSi", age: 18 }, { id: 3, name: "WangWu", age: 18 }, ]); const items2 = ref({ type: "上衣", number: "KY2022001", price: 200, }); </script> //Blazor中可以使用所有C#的控制语句=================== //使用foreach循环 @foreach (var item in peoples) { <li> @($"{item.Id}-{item.Name}-{item.Age}") </li> } //使用for循环 @for (var i = 0; i < peoples.Count; i++) { <li> @peoples[i].Name </li> } //使用while循环。不是闲得蛋蛋疼，应该不会用它 @{ var j = 0; } @while (j < peoples.Count) { <li> @peoples[j].Name </li> j++; } //循环整数 @for (var i = 0; i < 10; i++) { <li>@i</li> } //循环字符串 @foreach (var item in "Hello,functionMC") { <li>@item</li> } //是否可以像Vue一样循环对象？p1对象身上并没有迭代器，可以尝试定义一个迭代器来实现，或者通过遍历Json来实现。太费脑，先留着吧 @code { private List<People> peoples = new List<People> { new People{Id=1,Name="Zhangsan",Age=18}, new People{Id=1,Name="LiSi",Age=19}, new People{Id=1,Name="WangWu",Age=20} }; public class People { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } } }
4、指令体系概览
Vue和Blazor都有指令，指令本质上是内置宏（即一组命令），从这个角度理解，Vue在逻辑代码中使用的defineProps、defineEmits、defineExpose，算不算指令？对比Vue，Blazor的指令的划分、语法格式和使用，更加规范，也更加广泛。但目前为止，Blazor还不能够自定义指令，而Vue可以（单独章节来说）。下面对两个框架的指令，进行概述，后续章节再和其它知识点做更深入的总结
（1）Blazor的指令：可以划分为三类，Razor文件/组件级别指令、组件/标签级别指令、DOM事件指令
//1、Razor文件/组件级别的指令。Razor文件/组件，本质上是一个类，这些指令主要作用于类。除了@code外，其它指令所在位置都在文件头。 @code //c#代码块，可以定义多个 @page //路径，代码层面是作用于类的特性 @layout //母板，代码层面是作用于类的特性 @inject //依赖注入 @implements //实现接口 @inherits //继承基类 @attribute //标注特性 @typeparam //类的泛型 @namespace //所属命名空间 //2、组件或HTML标签级别的指令。这些指令都定义在标签的属性名位置，以@符开头，如<span @ref="title"></span> @ref //引用组件或HTML标签 @key //作为组件或HTML标签的唯一标识，主要在循环渲染时使用 @attributes //将字典扩展为组件或HTML标签属性 @bind //实现双向绑定 //3、HTML的DOM事件指令。这部分比较多，主要分为焦点、鼠标、拖动、键盘、输入、剪切板、触摸、指针、多媒体、进度、其它。需要注意几个点: //①如果我们把指令视为类，那么就还可以通过指令属性来定义指令的特殊形为。Blazor中称为指令属性（事件指令特有），Vue中叫事件修饰符。在Blazor中，使用麻烦点，需要重复一次指令。 <div @onclick = "SomeFunction"> <div @onclick = "AddCount" @onclick:stopPropagation></div> </div> //②事件回调可以默认获得DOM事件参数，但需要注意，不同事件类别，事件参数类型不一样，比如鼠标事件为MouseEventArgs，输入事件为ChangeEventArgs等。如果要传入事件参数以外的参数，需要使用以下形式： <button @onclick = "@((e)=>AddCount(e,1,2))"></button> @code{ private int AddCount(MouseEventArgs e,int a,int b){return a+b;} }
(2)Vue的指令特指v-开头的那十几个
//1、条件循环渲染 //①循环渲染 <li v-for="item in items">{{item.id}}</li> //②条件渲染 <div v-if="Math.random() > 0.5">大于0.5</div> <div v-else-if="Math.random() < 0.5">小于0.5</div> <div v-else>Now you don't</div> //③条件渲染通过更新display属性 <div v-show="true"></div> //2、数据事件绑定 //①属性绑定，简写用冒号 <span v-bind:title="title"></span> <a :href="href"></a> //②事件绑定，简写用@符 <button v-on:click = "addCount"></button> <button @click = "addCount"></button> <button @click.stop="doThis"></button> //③双向绑定，表单标签 <input v-model="count" /> <input v-model.number="count" /> <input v-model.trim="name" /> <input v-model.lazy="name" /> //3、控制组件渲染 //①只在第一次加载时渲染 <div v-once> {{ message }}</div> //②不编译，包括子组件，保持原始输出（此例中输出{{ message }}） <div v-pre> {{ message }}</div> //③直至编译完才出现 <div v-cloak> {{ message }}</div> <style> [v-cloak] { display:none !important; </style> //4、文件html绑定 ①可以等价于{{}} <div v-text = "text"></div> ... const text = ref('hello') ②绑定html原始标签，有风险，甚用 <div v-text = "html"></div> ... const html = ref('<h1>aaa</h1>')
5、补充：Vue的响应式约束
Vue通过reactive和ref，这两个API来创建响应式数据，实现html视图和js逻辑的数据绑定。实际应用中，有几个点需要特别注意：
（1）reactive只能用来创建对象类型（如对象、数组、Map、Set），不能创建原始类型（如string、number、boolean等）。而ref可以创建任何类型。
const a = reactive({name:'MC',age:18}) //正确 const b = reactive(18) //错误 const a = ref({name:'MC',age:18}) //正确 const b = ref(18) //正确
（2）reactive创建的响应式对象，默认是深层次的，所以里面嵌套的数据都是响应式的。
const a = reactive({}) a.people = {name:'MC',age:18} //增加的people属性也是响应式
（3）当使用ref时，值保存在ref对象的value属性上。如果是在逻辑代码里读取或修改，需要通过访问value属性，如b.value+=2；如果在模板中读取或修改，会自动解包，不需要.value
//逻辑代码中，需要通过.value来访问。模板中，自动解包，不需要.value <script setup> import {ref} from 'vue' const a = ref({name:”MC”,age:18}) a.value.name </script> <template> <h1>{{a.name}}</h1> </template>
（4）当使用ref创建对象类型时，会调用reactive来创建value属性，类似于这种感觉ref(reactive(value))，所以替换value值时，新值仍然是响应式的，而reactive如果替换新值，则会失去响应性。所以在实际应用中，创建对象数组类型时，需要使用ref，因为ref创建的对象，使用数组的map、filter、reduce等返回新数组的方法时，新数组仍然可以保持响应性。除此之外，创建分离的组合式API时，暴露出来的数据，也应该使用ref，这样在引用这个API时，解构出来的数据仍然具有响应性。
//这样是行不通的 const a = reactive({name:”MC”,age:18}) a = reactive{name:”Fun”,age:16} //ref才可以实现响应式替换 const b = ref({name:”MC”,age:18}) b.value = {name:”Fun”,age:16} //ref实现响应式解构 const obj1 = {foo: ref(1),bar: ref(2)} const {foo,bar} = obj1 //响应式解构 //使用ref，b还是响应式 const b = ref([ {name:”MC1”,age:18}, {name:”MC2”,age:19}, {name:”MC3”,age:20}]) b.value = b.value.filter((e)=>{return e.age >18}) //换成reactive，b失去了响应式 const b = reactive([ {name:”MC1”,age:18}, {name:”MC2”,age:19}, {name:”MC3”,age:20}]) b = b.filter((e)=>{return e.age >18})
总结：官方文档有一句话“为了解决reactive带来的限制，Vue 也提供了一个ref方法来允许我们创建可以使用任何值类型的响应式ref”。创建响应式数据时，我推荐尽量使用ref，虽然.value麻烦点。
