Blazor和Vue对比学习（基础1.1）：组件结构

Z时代
2024-01-10
分类：综合

vue

难度：★

简单说一说：

1、Vue和Blazor都遵循单文件结果，即HTML（视图模板）、CSS（样式）、JS/C#（代码逻辑）写在一个文件里，Vue的文件后缀为.vue，Blazor的文件后缀为.razor

2、三个部分的区别：

1）视图HTML部分，区别在于模板语法，主要是标签内容和标签属性的数据绑定。另外，Vue需要使用顶级标签<template>，Blazor不需要，上来就可以直接撸HTML。

2）样式CSS部分，基本一样，可能高级功能有一些差异，这部分目前关注的比较少，估计Vue会更灵活一些，必竟早走很多路

3）逻辑JS/C#部分，这是两者最大的区别，首先是编程语言上，Vue用JS或TS，Blazor用C#。Vue，本质上是一个组件实例，其上是一个根实例，再上就是原型，JS也是面向对象，但实现思路是原型（这方面还不是特别理解，还要深入学习）；Blazor本质上是一个部分类，组件就是一个类的实例，这个反而容易理解，和WPF的XML思路基本一样。

3、重点说一说逻辑部分（也是简单说一下）：

1）Vue：使用<script></script>构建，有选项式API和组合式API两种，继承了JS的自由（变量+函数），其中组合式API更有行云流水的感觉，也是官方更推荐的方式，所以之后学习都以组合式为主。3.0刚推出的时候，没有setup语法糖，那个时候虽然性能提升很大，但和Vue2相比，使用上反而给人感觉有些繁索退步，但3.2版本推出setup语法糖后，有了一个飞跃式的进步，写起代码，有爽的感觉了。

2）Blazor：使用@code{}构建，本质上就是一个类，所以里面的字段、属性、方法、事件等，包括高级点的依赖注入等，和C#用起来是一样一样的，即爽，又有规范的安全感。最重要的是，.NET的API都可以使用。当然，Vue也要大把API可以使用，包括JS和Vue本身的。

4、补充说一下代码隔离：

1）Blazor的HTML、CSS和C#三部分都可以实现隔离，如一个Blazor的组件名称为SayHello.razor，C#隔离出来有两个方法，首先都是新建一个SayHello.razor.cs的文件，方法一是使用部分类，方法二是让组件继承这个新类，方法一简单点。CSS隔离的话，超简单，同文件夹下新建一个css文件，命名为SayHello.razor.css即可。

2）Vue还不清楚怎么隔离，但学习Vue的小程序倒是天生隔离成三个文件

3）话说回来，既然都单文件了，为啥还要去隔离。用IDE直接隔离编辑不就可以了吗？VSCode都已经实现这个功能了。

//Vue的组件结构

//视图模板-HTML
<template>
  <h1>{{ sayHi }}</h1>
</template>
//代码逻辑-JavaScript，使用组合式API（Composition API），直接使用3.2的setup语法糖
<script setup>
import { ref } from 'vue'
const sayHi = ref('你好！')
</script>
//样式-CSS
<style scoped>
h1 {
  font-weight: bold;
}
</style>

//Blazor的组件结构
//视图模板-HTML
<div>
  <h1>@SayHi</h1>
</div>
//代码逻辑-C#
@code{
    privite string SayHi { get; set; } = "你好";
    private void UpdateTitle()
    {
        Title = "Hello, Blazor!";
    }
}
//样式部分-CSS
<style scoped>
h1 {
  font-weight: bold;
}