00:00
好嘞,各位,那在这一小节呢,我们给大家说一下这个sspans组件,它也是VIEW3里的一个新组件,并且官方说呢,这个东西目前呢,处于实验阶段,哎,就以后跟它相关的API啊,或者一些写法啊,还有可能改啊,但没关系,我们在这呢,先看一看这词什么意思呢?来搜索一下,打开有道直接翻译过来呢,它有悬念,悬疑,悬而不决的,那它的作用是什么呢?来各位想把sspances聊明白,我们得先聊一个概念,叫异步组件,什么叫异步组件呢?咱代码上见,把刚才写的东西啊精简一下,这个这个我不要了,只留下这个child的里边的东西呢,我也精简一下,它没有子组件了,这也不引入了,这儿呢也不注册了啊,就是干干净净的,我是child的组件,来关掉,样式也带着啊,明显一点来把它关掉,回到APP里边各位往上滑啊,我是APP,这呢是child的引入注册有式。
01:00
对吧?好,回头看一下效果啊刷新,哎,就这么两个组件是一个嵌套的关系,那么目前各位你听我说这个APP也好,这个child也好,他们两个呀,都叫做静态的引入,什么叫静态引入呢?各位来,我把这网速啊给你调的慢一点啊,我给你调成这个FAST3G,诶就是一个快3G网络,好各位我刷新页面,你看效果,然后我让大家这个看的是哪啊,我先跟你说一下啊,就是说一会儿啊,这两个组件是一起出来的,就是网速现在不是很慢吗?我不管你多慢啊,这两个组件是一起出来的,也就是说如果child的组件没出来,这个APP也不会出来啊,看一下效果啊,可能等的时间呢会长一点,各位我不能把网速调快,调快了之后,你看不出来他俩是一起出来的,让大家多看两次啊,来走,你稍微等一会儿,各位等着啊,现在能做的就是等,注意观察他俩。
02:00
是不是一起出来的?哎,各位,他俩是一起出来的吧,啊,说老师没看清,来再来一遍啊,各位同学,我不演示那么多遍,我再最后演示一遍,然后一会儿呢,我再给你换一种写法,你发现他俩不是一起出来的,可明显了呢啊各位说老师刚才没看清,唰一下就出来了啊来,再来一下啊。慢慢来啊,稍微等一会儿,你网速不能调快,调快了之后你就更没法观察了,慢慢来,现在就是网速很慢啊,加载的很慢。看着他俩是不是N儿一起出来的。等会儿啊,等会儿。哎,一起出来的是吧,同学,不再演示了啊,不再演示了,是一起出来的啊,那接下来呢,我让你看看什么叫做动态组件,来各位啊,不要这样引入child了,哎,说老师那怎么引入啊,来,走着换一种方式从view里面引入这么一个东西啊,View里面有这么一个API,叫做DeFine a think component,什么意思呢?异步组件,哎,什么意思呀,定义,那也就是说这个API的功能就是定义一个异步的组件,怎么用呢?同学,这就是人家的设计了,来直接写赋值语句,然后呢,给他一个child,那值从哪里来呢?调用这个DeFine a think component,要求你里面传入一个函数,我传没传,传了吧,而且还要求这个函数得有返回值,那既然它有返回值,我可不可以不这么写?各位,我可以这样啊,Return,然后一个999,这是不是返回值,但是太麻烦了,毕竟是箭头函数,我是不可。
03:43
直接这么写呀,嗯,那返回什么呢?返回一个import函数调用的结果,Import我们之前一直这么用,是一个关键词对吧?哎,那这回换了它是一个函数,哎,就直接这么写就可以引入谁呢?当前目录下的components下的谁呢?Child,哎,当然了,点view可以删掉,说老师这叫什么呀?这叫动态引入,OK,来写好,这叫做静态引入,那这个呢,叫做动态引入,哎,或者呢,同学也可以换一个词儿,叫做异步引入,什么叫异步呢?在哪能体现出来呢?来慢慢来啊,各位他俩呢,必须得是配合啊,你不能把它住掉,你这住掉了,没有这API了,对吧?来打开走着各位让大家看看啊,这个静态引入,哎,这是静态引入是吧?静态引入和动态引入有什么区别呢?或者说异步引入来,咱们这样先把网速啊,给你调成正常的刷新一波,诶各位。
04:43
哎,我问你啊,现在控制台也没啥警告,对不对,哎,就是正常引入吗?好回到哪呢?回到这个network里面,目前啊,网速是正常的,刷新是不是能展示,哎,那我不用这种方式了,注掉注掉,我用这种方式,这是不是叫静态引入啊?嗯,那再看一下呗,刷新同学是不是没有区别呀?哎,目前来看确实是这样的,但是当网速慢的时候,它俩的区别就出来喽,来这个柱调打开打开好各位啊,观察效果保存,刚才你看到了,他俩是一起出来的,接下来网速变慢,刷新页面,这个时候你注意看啊各位异步引入的那个child的是后出来的APP,先出来,注意观察。
05:27
稍等。APP出来了,哎,Child出来了,同学什么也别说,是不是他俩有一个先后顺序,对不?什么叫异步,哎,意思就是,哎哟,Child你有点慢了,那这样吧,咱们俩都慢,那就这样吧,我出来的吧,我就先展示是不你后出来那个你什么时候,哎你回来了,那你再展示对不对,体会体会各位,这就是异步,来再给大家看一下,刚才可不是这效果,刚才是他俩一起出来的,对不对,各位,哎,你要网速要快,看不出来它俩的区别啊,稍等,还是APP先出来,然后child呢后出来。
06:07
稍等啊,一会儿再跟你说一下它那个解析的过程,诶APP诶child好了,说一下解析的过程啊,是这么回事,各位就是如果说呀,你通过这种方式引入的child,人家的意思就是好,你只要没有引入成功,我整个APP都不进行渲染,为啥我第四行等着你呢?我第四行要用你啊,结果你这儿呢,你迟迟不回来,那没招儿了,我就等着吧,那如果说你都用这种方式去引入组建,会容易引发什么问题呢?各位来会有这个问题,说这个绿色的呀,是一个最外侧的那个组件完里边,哎开始套娃了,再来一粉的啊,再来一黄的,再来一橙色的,最后再给它来一个什么呢?这个红色的吧,哎,最里边的这个红色的,如果慢了,那就会造成这些东西咋的,哎,就等这人,就等他木桶原理嘛,对吧,能装多少水取决于最短的那个木板,这也是什么时候展示出来,取决于最慢的那个人。
07:08
是不,各位,那这样的话就容易出现问题,但如果你用了这种方式,各位,诶动态引入它就不会出现这个问题是不?哎,只要你是通过正常的import引入,这全算静态引入,静态引入那我就得等对不对,你不回来,我整个APP也不出现死等就等最慢那个人他回来之后呢,然后哎,所有东西再出现,哎所以说异步引入相对来说能好一点,异步引入啊好虽好各位,但是有一个小小的问题,什么问题呢?乔打各位,现在网速不是慢吗?刷新一下哎,然后一会儿APP是不是先回来的呀,用户啊,还以为APP里没东西了呢,来等会儿啊,我给你卡一下。拿着画笔给他卡住。好,APP是不是回来了,哎同学我把画面冻结了啊,就不知道的人呢呵,还以为这块没东西了呢,实际上有没有有,然后结果等了一会儿唰闪现出来,这就不太好是吧,各位,这整个页面有点抖动,那怎么解决这问题呢?哎,就用它谁suspans,哎叫做悬疑的,悬而未决的,怎么去使用呢?特别简单啊各位,就是你用这个susps这个内置的组件,同学不用在view里面说老师我是不是还得引入一个在这什么suspans不用不用引入,这也不用注册,是内置的,直接就能用,你用这个东西啊,把你的child包起来,然后呢,我跟各位说一下啊,这个sspans它本身底层也是用什么实现的呢?用插槽实现的,哎也就是说你得把你真正要展示的这个组件啊,得放在一个插槽里啊,而且人家插槽有名字,各位就这么理解,这个sspans已经给你准备好了两。
08:55
茶槽,一个插槽是黄色的,一个插槽是粉色的,黄色的插槽用于放置真正你想展示的那个child的,哎,换个颜色,黄色的,那么这个粉色的插槽呢,专门用于展示这个child的组件,咋的还没有回来的时候还没有加载出来你要展示的内容,说白了展示一个loading啊,那怎么玩呢?各位很简单,直接写一个template完了,把你真正要展示那child给它包里面,而且这你注意了,一定要指明这个里面的插槽是谁,就说白了你这child放在哪个插槽里啊,V-lo,然后来一个冒号,Default同学,这名不允许换,因为人家那边真的写了两个插槽,一个叫default default里面就是放置你本应该展示的组件,那如果说由于某种原因啊,这组件慢了啊,那咋办呀?来,那就得靠下一个template,它的名字呢,叫做fall back。
09:55
同学,Fall BA啥意思呀,查查呗,走着fall back就什么应急计划,来往下撤退后退可依靠的东西,同学,说白了就是退路,哎,简单给大家形容一下啊,如果说你这个组件很快就回来了,各位OK,直接展示它,但如果说由于某种原因啊,你这个组件很半天都没有展示出来,那怎么办呢?哎,那就展示fall back这个插槽里的东西,Default是给真正展示内容用的,Fall back呢,为什么人家退路啊,就说如果这边不行了,这边靠不住了,这边回不来了,那怎么办?那我展示这里边的,那你说这里边你得写什么呢?随便写一个,比如说写一个H3,哎,叫做加载中,哎,然后呢,点点点,然后写一个,前面来一个啊这个叫什么?稍等是吧?哎,加载中,OK,写完了,那来这回呢,你再瞧瞧效果啊,各位网速是不是还慢着呢,哎,刷新一波等着啊APP。
10:55
确实应该先出来,哎,主要是看看里边的那个差的那个位置啊,注意观察。
11:08
哎,看稍等,诶同学看到没啊,稍等加载中我就不再刷新一遍了啊,因为这个挺浪费时间的,大家可以把这个视频退回去,然后你再看一下,OK,嗯,就是有一个加载中的效果的,同学你看这样做是不是比较好啊,就是用户没有看到这个child的,但是用户看到了加载中,哎,就能稳住它,他知道接下来有东西啊,看一眼控制台啊,各位输出了这么一个东西,什么意思呢?他的意思就是这个suspanse啊,目前VIEW3呢,正在实验阶段,哎,有可能以后它的API你看likely change有可能会改变,没关系,我们先这么用着呗,以后改了我们再翻文档呗,OK啊,那这就是异步引入组件,那在这里呢,各位既然提到了这个suspans,我就必须还得跟你提一个人,提谁呢?来各位啊,刚才我是怎么弄出来这个东西慢的,我是怎么让它慢的,是不是调了网速。
12:04
那网速要特别快呢,来刷新网速快,同学你看不出来效果的对不对,我再刷一波,走着诶一闪而过,有的时候连闪都不闪,我再来一下啊,走,你看一闪而过,不知道各位能不能看到啊,这其实有一个加载中的,但有的时候啊,他也不出现,因为你的这个网速正常嘛,同学还有一种情况容易让他慢,什么情况呢?来各位啊,咱回到child的组件里,在这儿呢,我制造点数据啊各位,我在这儿呢,写一个set,然后呢,还是给它准备一个求和的那个和,哎,写一个ref,把零呢丢进去,那当然在这儿了,我得引入import,走from view,引入一下这个ref OK,引入完了吧,那在这呢,把这东西交出去,页面里呢,我就简简单单用一下啊,直接写这个SOK,你看准备数据吗?交出去他用数据嘛,对吧,各位,哎,来回来,那网速已经正常了啊各位刷新一波你看。
13:04
干干净净的有这零吗?那接下来你看好了,各位回到这儿慢慢捋啊捋顺一下,我用没用,亦不引入用了,我用没用suspans用了,好,你是不是把这两件事儿都准备好了呀?来,开始各位回到child里面,接下来我做一件事儿,你瞧着我不再返回这个对象了,诶,那这回我返回什么呢?又一个promise,哎,也就是说我要返回一个promise实例对象,那这有一个result,这有一个reject,然后接下来里边我去调整result,然后呢,我把这个值写成some,哎,然后让他等一会儿执行啊,不让他立马执行,等多久呢?等500毫秒吧,或者同学来,咱们这样先让他等一秒钟,时间长一点走,Or意思就是一秒钟。
14:04
之后它成了呗,啊,慢慢来啊,我返回的是一个promise值,而且我是等了一秒钟让它成,对不?哎,并且我把这个promise返回了,也就是说各位,现在我的setup可厉害了,我的返回值是个什么东西,Promise实例对象,而且是等了一秒钟成功的哟,那这个时候你看效果啊,网速可是正常的刷新一波。诶,真等一秒钟,你这如果调成三秒钟保存刷新一波,加载中稍等这个东西一直停留三秒钟,然后你才回来,诶说老师啊,还能这么玩,就是promise,我要返回一个promise实例,也可以让他等一等这个组件,诶也能出现等一等这个异步的情况,是的,各位,哎,说老师不对呀,啊来来来,我要骂你了,老师,你说谁当时跟我说的呀,来这儿呢?哎呀,谁当时还给我整理的笔记,哎呀,拉开序幕的setup啊,谁告诉我的呀,Setup不能是一个a think函数,因为a think1修饰返回值就不是那个对象了,而是promise了啊,模板看不到return对象中的属性,谁告诉我的呀?说老师,那你之前这不总结错了吗?各位,是这样,我们当时在总结这个东西的时候,在说这句话的时候,我们不知道有一东西叫异步组件,我们不知道有一东西叫suspans。
15:30
也就是说各位,如果你之前写出来过这种代码,那可就不好玩了,为啥说呢?来走着,之前你不知道有suspans,之前你也不知道啊,嘿,还能定义异步组件呢,你只知道这么写,那之前你肯定也是这么写的,来1CHILD的,你说对吧?各位,走着,诶,Child,然后呢,在这儿不字结束了啊,就这么写着吧,来回到这边,刷新没了,对不影响就是组件都没了是不?各位,所以说之前我们不能这么写,但是如果说你用了这个suspans,而且你这组件呢,嘿,它还是动态引入的,或者说异步引入的,那就可以这么玩啊,刷新等着加载中等了三秒A,然后这个child的组件就展示了是吧?各位,哎,也就是说不是说不能返回这个promise实例对象,那怎么着,我得看看你这东西吧,他是不是在这边用了susps,是不是做了一步引入,对吧,各位,那也就是说。
16:30
其实这块可以think对不?各位,那在这呢,我能不能这么写啊,来new promise,这个我拿出去,在这儿呢,Let一个P啊,等于这个promise,然后我return什么呢?同学在这我这么写return呢,这个东西a ait wait wait,谁呢,P同学wa p是不是等到P成功的结果,那P得多长时间才能成功呢?得等三秒,那我这用不用a think用了是不?各位,我是用a bit,这不就得用a think吗?那你看一下同学它的显示也是没问题的,只是等了三秒钟对吧?各位,哎,所以说还有这么一个办法,能让你的组件等一等,一就是网速慢,二就是你用了promise OK不,各位,那在这呢,我们补一句话,哎,在这儿叫做什么呢?后期啊,可以后期也可以返回一个pro啊,Promise实力。
17:30
但需要需要什么呢?来吧,是这个东西叫做suspans,然后呢,和和什么呢?这个动态引入,或者说这个异步组件,异步组件得什么呢?配合配合是不是各位OK,哎,这就是我们讲的这个啊,叫做suspans,悬而未决的啊,那把这个使用的步骤啊给大家总结了一下啊,首先你得引入组件,并且是异步引入的,得借助这个东西,还有就是SSPPS包裹这个组件,并且得配置好默认展示的东西,还有如果加载慢了,由于某种原因慢了啊,它展示的是什么?OK,哎,那这一小节呢,我们停。
我来说两句