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当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...
随机推荐
- dll反编译(修改引用文件、修改代码)再生成dll
问题描述 我们在日常开发中经常会遇到,想要对dll文件做修改的操作,但苦于没有源代码,只能想想其他办法 解决问题 办法就是通过几个工具来反编译.正向编译.修改属性 反编译.正编译 参考https:// ...
- css边距重叠的解决方案
** css防止边距重叠的方法 ** 今天整理了一下用css防止边距重叠的几种方法先假设一组dom结构 <div class="parent"> <div cla ...
- 前端架构gulp与webpack(知识点整理)
一 概念介绍 gulp 是 task runner,Webpack 是 module bundler.可以这么说, Webpack 和 gulp 本身都有 95% 的功能是不能被对方替代,或者直接说和 ...
- spark配置双master时一直处于standby的情况
一.情况描述 按照如下配置,使用zookeeper监听 SPARK_DAEMON_JAVA_OPTS="-Dspark.deploy.recoveryMode=ZOOKEEPER -Dspa ...
- 关于根据数据反选checkbox
前两天完成了一个连接hbase数据库的mis系统,mis系统中经常需要修改功能,复选框.多选框等等的自动勾选,感觉很麻烦,在此记录一下修改功能checkbox自动选中. 例子: <div cla ...
- 多态polymorphism,向上转型和动态方法调度有什么用?
多态有什么用?马 克 - t o - w i n:https://blog.csdn.net/qq_44639795/article/details/103117332我给大家想了两个 ...
- 使用pyttsx3实现简单tts服务
操作系统:Windows 10_x64 python版本:Python 3.9.2_x64 pyttsx3版本: 2.90 pyttsx3是一个tts引擎包装器,可对接SAPI5.NSSS(NSS ...
- java的collection类
collection来源于java.util包. Collection 接口常用的方法 size():返回集合中元素的个数 add(Object obj):向集合中添加一个元素 addAll(Coll ...
- SprigCloud入门踩坑之创建bean失败
昨天也是报同样的错误,恰好要去吃饭,着急就没找到问题,把项目删了,后续看了路飞大佬的通过pom导入依赖的方式,但是资源导入太慢随放弃. 昨晚熄灯前二十分钟又从头敲了一遍,敲好就断电了,没来得及启动,今 ...
- 用 GraphScope 像 NetworkX 一样做图分析
NetworkX 是 Python 上最常用的图分析包,GraphScoep 兼容 NetworkX 接口.本文中我们将分享如何用 GraphScope 像 NetworkX 一样在(大)图上进行分析 ...