Blazor和Vue对比学习(进阶2.1.1):生命周期,基本理解和使用
一、基本理解
首次接触“生命周期”这个名词,是比较晦涩的,Vue中又有生命周期钩子,而Blazor则是虚方法重写,容易蒙。所以,我尝试从初学者的角度来阐述一下。
1、我们在基础部分已经知道,组件有两部分组成,一是逻辑层,有数据和方法(方法本质上也是数据);二是视图层,虽然有自定义组件,但拆到底,还是HTML原生标签。
2、组件的初次呈现,可以先简单的理解为两个过程,第一步,完成逻辑层的实例化,类似于一个类的实例化,为视图层准备数据;第二步,完成视图层DOM的渲染,会使用到逻辑层的数据。这就是生命周期,当然中间过程我们需要继续细化。
3、在这个生命周期中,我们肯定想做两件事情,一是当到达特定阶段时,让我知道,这样我可以执行某些任务;二是我还能根据一些情况的判断,来决定生命周期是否继续执行。
4、为了实现上面的两件事情,Vue为我们准备了不同阶段的生命周期钩子,Blazor则是虚方法。两者的原理是一样的,本质上,是一种命名约定和方法重写。如在完成视图层的DOM渲染后,Vue执行一个名字叫onMounted()的方法,Blazor则执行一个名字叫OnAfterRender()的方法。Vue中,我们使用回调,Blazor中我们通过重写override,就能实现自己想执行的逻辑。
5、Blazor生命周期的使用,更加接近于本质,虚方法和方法重写,有C#基础的,都好理解,而Vue的钩子,虽然易用,但要想整通透了,则更加晦涩一些。如果看Blazor生命周期的源码,里面有很多类似这样的代码:if(某某状态出现){则调用某个方法},条件就是用来判断生命周期到哪个阶段了,方法体中调用的方法就是Blazor的生命周期虚方法,是不是很容易理解?!
二、基本使用
两者的语法使用都非常简单,直接在逻辑层,按约定写方法就可以。但要使用得当且灵活运用,还是需要了解每一个生命周期过程的细节,尤其是Blazor,会相对复杂一些。Blazor提供了更加丰富的控制方法,但也提高了使用的复杂度,看产品路线图,未来还会继续增加生命函数。对生命周期细节更深入的学习,我们放到第二节,这节先简单了解一下
1、 Vue的生命周期钩子,作为API导入,方法体中写回调逻辑。
//Vue======================================= onBeforeMount(()=>{console.log("组件渲染/挂载前")})
onMounted(()=>{console.log('组件渲染/挂载后')}) onBeforeUpdate(()=>{console.log('数据更新前')})
onUpdated(()=>{console.log('数据更新后')}) onBeforeUnmount(()=>{console.log('组件销毁前')})
onUnmounted(()=>{console.log('组件销毁后')})
2、Blazor直接重写生命周期函数(方法签名一致),方法体中写自己的逻辑,部分虚函数提供了入参
//Blazor==================================== public override async Task SetParametersAsync(ParameterView parameters)
{
Console.WriteLine("参数设置前");
await base.SetParametersAsync(parameters);
//完成内部字段/属性的初始化,收集外部传参数到ParameterView,未给参数属性赋值
//最后执行【base.SetParametersAsync】,给参数属性赋值
} protected override void OnInitialized()
{
Console.WriteLine("组建初始化");
//创建组件实例,完成组件的初始化,此时参数属性已被赋值
//有一个配对的异步函数OnInitializedAsync
} protected override void OnParametersSet()
{
Console.WriteLine("参数设置后");
//这个生命函数更像是OnInitialized的备胎
//OnInitialized只在组件初始化时执行一次,参数更新时,并不执行
//所以需要一个生命函数来完成OnInitialized做的事情
//有一个配对的异步函数OnParametersSetAsync
} protected override void OnAfterRender(bool firstRender)
{
Console.WriteLine("组件渲染后");
//DOM完成渲染后,此时可以获得最新的ref
//是否渲染DOM,根据虚拟DOM的差量算法
//可能引起渲染:父组件重新渲染、父组件传入的参数属性变化、本组件字段/属性变化、本组件事件执行等
//有一个配对的异步函数OnAfterRenderAsync
} //Dispose不属于生命函数,所以用法比较特别,先实现IDisposable接口,然后调用接口的Dispose方法
//这个设计比较奇怪的,也没有查到这么设计的原因,推断是防止重复执行,因为Dispose是框架层级的一个方法
@implements IDisposable
@code {
void IDisposable.Dispose()
{
Console.WriteLine("组件销毁");
}
}
Blazor和Vue对比学习(进阶2.1.1):生命周期,基本理解和使用的更多相关文章
- Blazor和Vue对比学习(进阶2.2.4):状态管理之持久化保存(2),Cookie/Session/jwt
注:本节涉及到前后端,这个系列的对比学习,还是专注在前端Vue和Blazor技术,所以就不撸码了,下面主要学习概念. 我们知道,Http是无状态协议,客户端请求服务端,认证一次后,如果再次请求,又要重 ...
- Blazor和Vue对比学习(进阶2.2.3):状态管理之状态共享,Blazor的依赖注入和第三方库Fluxor
Blazor没有提供状态共享的方案,虽然依赖注入可以实现一个全局对象,这个对象可以拥有状态.计算属性.方法等特征,但并不具备响应式.比如,组件A和组件B,都注入了这个全局对象,并引用了全局对象上的数据 ...
- Blazor和Vue对比学习:说在开始前
1.Vue:现代前端三大框架之一(Vue/React/Angualr),基于HTML.CSS和JavaScript,2014年正式对外发布,目前已发展到3.X版本.值得说道的是,Vue的创始人作者是华 ...
- Blazor和Vue对比学习(基础1.4):事件和子传父
Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...
- Blazor和Vue对比学习(基础1.6):祖孙传值,联级和注入
前面章节,我们实现了父子组件之间的数据传递.大多数时候,我们以组件形式来构建页面的区块,会涉及到组件嵌套的问题,一层套一层.这种情况,很大概率需要将祖先的数据,传递给子孙后代去使用.我们当然可以使用父 ...
- Blazor和Vue对比学习(基础1.5):双向绑定
这章我们来学习,现代前端框架中最精彩的一部分,双向绑定.除了掌握原生HTML标签的双向绑定使用,我们还要在一个自定义的组件上,手撸实现双向绑定.双向绑定,是前两章知识点的一个综合运用(父传子.子传父) ...
- Blazor和Vue对比学习(知识点杂锦3.04):Blazor中C#和JS互操作(超长文)
C#和JS互操作的基本语法是比较简单的,但小知识点特别多,同时,受应用加载顺序.组件生命周期以及参数类型的影响,会有比较多坑,需要耐心的学习.在C#中调用JS的场景会比较多,特别是在WASM模式下,由 ...
- Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听
1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
随机推荐
- Linux基础学习 | 目录及文件
一.目录结构 Linux目录采用树形结构,以根目录/向下延伸呈一个倒置的树的形状. 每个目录下都有其相对应的子目录,而子目录中又有其子目录的存在,就像一棵树的树枝分叉,所有的目录层次结构分明,每个目录 ...
- 简单的多选框选择功能js代码
最近没事写了个特别基础的多选框功能代码,代码如下:js部分: //获取所有class为checkbox的多选按钮(需要以下功能需要先写出对应功能的元素). var checkBoxList = doc ...
- 用css动态实现圆环百分比分配——初探css3动画
最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额.要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态! 在mdn把新特性gradients(渐变).trans ...
- 利用angular4和nodejs-express构建一个简单的网站(七)—用户注册之ReactiveForm
这一节对用户注册组件进行分析.用户注册组件主要涉及angular4表单的操作.Angular提供了两种构建表单的技术:响应式表单和模板驱动表单. 这两项技术都属于@angular/forms库,并且共 ...
- SpringCloud微服务治理技术入门(SCN)
1.集群.分布式.微服务 首先先理解三个感念 什么是集群?: 同一个业务,部署在多个服务器上,目的是实现高可用,保证节点可用! 什么是分布式?: 一个业务分拆成多个子业务,部署在不同的服务器上,每个子 ...
- DC-1 靶机渗透
DC-1 靶机渗透 *概况*: 下载地址 https://www.vulnhub.com/entry/dc-1,292/ *官方描述:* DC-1 is a purposely built vulne ...
- 动态代理-JDK
代理模式:假设一个场景,你的公司是一位软件公司,你是一位软件工程师,显然客户带着需求不会去找你谈,而是去找商务谈,此时商务就代表公司. 商务的作用:商务可以谈判:也有可能在开发软件之前就谈失败,此时商 ...
- spring程序开发步骤
1.使用spring框架之前的开发步骤 2.使用spring之后的开发步骤 3.文字描述 1.导入Spring开发的基本依赖 2.编写Dao接口和实现类 3.创建spring核心配置文件 4.在spr ...
- Linux磁盘之inode
什么是 inode ? 文件储存在硬盘上,硬盘的最小存储单位叫作"扇区"(Sector).每一个扇区储存512字节(至关于0.5KB).操作系统读取硬盘的时候,不会一个个扇区地读取 ...
- RPC及Dubbo和ZooKeeper的安装
RPC及Dubbo和ZooKeeper的安装 RPC 通信有两种方式:HTTP(无状态协议,通信协议),RPC(远程过程调用) 它两的本质没有区别,只是功能有点不一样 官方解释: RPC是指远程过程调 ...