Blazor和Vue对比学习（基础1.2）：模板语法和Razor语法

Vue使用模板语法，Blazor使用祖传的Razor语法，从逻辑和方向上看，两者极为相似，比如：

• 都基于HTML
• 都通过声明式地将组件实例的状态（数据/方法）绑定到呈现的DOM上
• 都通过指令实现更加丰富的视图/HTML与逻辑/JS和C#的互动应用
• 底层机制都是通过虚拟DOM，实现差量更新
• 工程组建方式都基于组件树
• 都具有单文件组件特征

但在具体实现和语法上，两者有比较大的差异。给人的总体感觉就是，都很熟悉，但就是不太一样。以下仅对语法基础进行逐点比较，内容较多，目录如下：

1. 标签内容绑定（单向）
2. 标签属性绑定（单向）
3. 控制结构（判断/循环等）
4. 指令体系概述
5. 补充：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麻烦点。