00:00
来,下边咱们来说说这个组件啊,叫suspens。当然了,这个有同学可能对于这个单词不是很清楚啊,我呢在这边给大家来个。呃,翻译啊。在线翻译。来看一下啊。啊,悬念啊,这个翻译还挺有意思的。啊,Suspense啊,这个咱们这里边翻译的是不确定啊,这个是什么意思呢?其实也好理解啊。就是说什么呢?我呃,允许我们的应用程序在等待异步组件时渲染一些后备内容,可以让我们创建一个平繁的业务体验。这是官方的话啊,咱们翻译过来就是这个样子的,就是说我的页面里边要显示一个异步组件,但是异步组件得需要过一段时间再显示,那空白期间是吧,异步组件在显示之前这个空白期间空白页。那我要显示点别的东西怎么办啊,用这个色色本子这个组件就可以了,好,那咱们来看一下啊,并不复杂。
01:01
呃,那我把之前的这些代码就做一个保存。来个文件夹吧。22,咱们之前讲的是tet tpoint的组件介绍啊。好把这个APP还有这个组件诶。按住CTRLC。拿过来好搞定,那我这个组件删掉不要了。APP里边这个代码咱们就也不要了,来个VV3。好简单一点啊。嗯,这块写个HR。是什么呢?Su,这先写个APP负极组件吧,啊,然后咱们这块讲的Su。呃,Suspen PE。嗯,这个单词好像给我写错了,我改过来Su。嗯,果然。这个组件的使用。好,咋办呢?那这个时候我来一个子集组件吧,啊,来一个子集组件。
02:06
好,那我这边来一个文件,比如说叫AA sync吧,嗯,然后COP。点a think component as c,对,A think component,对,就来一个异步组件,但是我这个组件呢,里边暂时先写上一个标题吧,H3ASYN c Co组件子集组件就写这么一个标题,然后里边呢,嗯,对。我得这么干啊。而不用这个,我用的是VV3。然后这个位置来一个标题。H2好搞定,然后呢,把这个名字复制一份啊。放到这个位置来。里边写上一个setup括号,括号return,暂且先给一个空对象吧,好。保存一下啊好,注意我的负极组件这边要用到当前这个子集组件,那怎么办?就引入呗,是不是啊,那引入组件有什么方式,那是不是有静态组件,静态引入和动态引入。
03:13
嗯,动态引用啊,这个词绝对是个意外啊,好,那我们这样,我们来一个什么呢?动态引用方式,VR。中动态引入组件的写法怎么写的呀?应该是来一个。Asy nc这个名字被我起的太长了啊,Component,然后等于嗯,咋写的呢,等于括号,它它来一个。这么写的。点杠我think component view啊,当然我把这个名字复制一下,万一给我写错了呢,那多尴尬呀,保存一下,下一步我要做的事情是引入。啊注册啊,应该是来注册了啊好,注册完了之后,我上边就可以去使用了,是不是啊,那我要使用一下这个组件。
04:02
来吧,斜线啊,可要注意啊,虽然说这个组件已经被我定义完了,但是这种引入方式的话是动态引入方式,动态引入可以认为是一个义务的一个操作了啊,然后呢,当然我们可以打开这个页面去观察一下,我刷新一下啊。刷新一下之后,大家可以看一下这个位置啊。嗯,这么慢吗?来快一点。刷新一下是不是这个0.gs是后出来的吧?啊后出来之后呢,那我要显示这个内容啊,这个内容怎么没有被我显示出来呢。Component子集组件,然后我这边引入。然后上面去使用,嗯,不应该呀,为什么没有出现啊,对,应该出现,应该是啊,我们来看看啊,这里边有一个问题啊,就是一个警告嘛,说是UN find,为啥呢?啊,这边忘说了,我这边刻意还写了一个VR中的动态应用组件写法,对吧,这种方式得干掉。这种写法怎么的呢?在VIEW3中这种写法不行啊,所以说下边我们还得再来一个VIEW3中的动态引入组件的写法啊,怎么写呢?还是cost,还是这个名字。
05:14
但是我们用的是DEF,得先引入啊,引入一下。DeFine,然后component。得这么玩儿。等于它括号里边得传入一个回调,调这个point。点杠,哎,这样点view啊。这个很长是不是啊,没关系啊。长一点这感觉也挺好,我一刷新大家看一下啊,这个组件内容是不是就出现了吧?啊但是呢,注意看啊,我network这个里边我再刷新一遍,咱们可以看到这个0.gs是后出来的是不是啊,动态的打包进来好。我想说的是件什么事呢?如果说啊,我此时把这块改成他。这样如果我去刷新的时候。
06:01
改成改成另外一个吧。如果改成另外一个,假如说我的网速比较快,我去动态加载这个组件的时候,大家会发现什么问题呢?就是可能会出现一点时间,这点时间是空白的,过了这段时间之后,这个组件呢才显示出来。那么那个空白时间,如果仅仅是给用户留下一个空白的,呃,白板网页的一个白板,你想这个体验才能好吧,他肯定是不太合适的,对不对,那怎么解决这个问题呢?这个时候我们可以用这个四奔组件来看一下怎么用啊。其实它的用法还是蛮简单的啊,只需要在这个位置这么玩,把它咔拿过来。然后呢,再卡拿过来,拿过来之后在这个里边啊,我们得写上template模板。T template。然后呢,把它复制一份,把当前这个异步组件呢,比如说我放在上面这个位置啊。这里边儿放的是异步组件。1234。
07:02
然后呢,这个里边放的就是什么呢。属于这个。呃。准备的内容,啥叫准备的内容呢?比如说HR啊,然后这个是loading,那所以说这个叫做loading的内容。当然了,这块没有写完,这里边儿我们还得写上一个什么呢,嗯,这个东西。注意啊,它是V-slo v杠路冒号,呃,然后后边写的是一个ALBA这么一个东西,For back,然后这是一个固定写法,当然了,上边的这个位置也得写上一个vgaut,但VGA可以简写写上一个。At这也可以注意啊,我把它保存格式化一下,咱们来看一下啊,我这边做一个刷新操作。我一刷新。看一下有没有那个楼顶啊。出来了吧,一闪而过就过去了啊,一闪而过就过去了,但是这个效果可能并不是特别明显,是不是,但是还是有啊。
08:02
看到了吧,一闪而过过去了啊,那所以说呢,接下来啊这样做。呃,因为我这里边返回来的对象是普通的对象,这个数据在这上面可以直接就显示了,我这样我把这个。Setup当中的这个代码稍微改一下。啊,改成一个什么呢?异步的操作,咱们来看一下啊怎么做。呃,比如说我把它干掉,我这个位置直接返回一个什么呢。这么一个对象。里边呢,我给他来一个回调,在这个当中re so LV z re。然后在这个里边,我就直接来一个什么定制器吧。模拟吗?逗号,我给他来一个2000。好,来一个定器,在定时器当中,我去reserve re so LV reserve里边来一个什么呢?对象,这个对象当中给他一个MSG,比如说。What?啊,有农少雷好搞定啊,注意那我上面是不是可以使用这个数据吧,我来个H3啊。
09:08
MSG。然后呢,我这个setup当中返回来的是一个promise对象,那肯定是异步操作,然后过了一会儿才会显示数据啊,所以说呢,我这啊,我这边也不去动态引入了。我就用静态引入的方式啊。这些都得注释掉。静态引入坐件就够了啊,都不用动它的了,Point,咔咔,然后from点杠,他点view,把名字复制一下。放在这儿。格式化啊,注意保存。这边呢也保存,现在我们打开这个界面啊。保存了啊,现在注意看我去打开这个界面。大家来看一下啊。发现什么问题没有啊,等一等。Loading是不是出来了吧,然后才显示这些内容,这就也是一个异步操作吧,哎,当我的setup当中返回来一个promise对象的时候,那这个时候这里边这个数据。
10:04
是不是应该过一会儿才给我显示吧,那我过一会儿才显示这个数据,大家想。那这边是不是就有可能会出现一个空白期啊是吧,怎么办?那我可以用Su,呃呃,Suspens这么一个组件是吧,让它去显示一个loading的内容。这样呢啊,在这个过程当中,异步组件呢,可以正常的继续的去加载,什么时候异步组件已经出来了,没有问题了,那我这个loading呢,也就消失了啊。其实这种功能我们也是可以自己做的啊,当然啊,我在这块反过来是一个new promise,我能不能用think of的方式呢?能不能用点赞点开的方式呢?其实也是可以的,比如说我们举个例子啊。来一个新的文件,比如说这个是a syncdd ress.view。里边来一个VV3啊。那这里边呢,我也给他一个标题吧,Ay CD ress组件。
11:00
然后呢,在这个里边啊,改个名字啊。先改个名字。我也就给他来一个setup。瑞特,注意啊,我这个位置稍微给他改一下,我怎么改啊?Return后边跟的是C呃X AX is.get的方式,但是我需要先引入。引入。Axls point AX ls,然后from X之后呢,我在这里边我直接写上一个date ass.je好,注意点在。开始。是不是啊,当然我这个开始我就不写了,在里边注意啊。我在在里边来一个什么呢?Re response。然后我在这个里边把这个数据呢,给它返回来。
12:01
对象给他一个date response点什么呢?Date这不就是真正的一个异步操作吗?是不是,然后这个date我在上边给他展现出来。H3吧,括号括号来一个date。好,注意啊,保存。我现在在我的APP组件里边去用,用这个组件,那我也是静态引入啊。这个我就先不要了啊。这个先注掉,否则他给我报ES0警杠,所以说我上面这个位置也暂时先不要。好,引入这个组件。Point,然后ay nc,算了,随便写点东西吧,F f from,点杠这么写。点,然后呢,这个组件也得需要注册啊。上面可以直接去用了。我现在说的是一个什么问题啊,我现在所说的这个问题是这个样子的啊,稍等我们把它这个。显示出来来看一下啊。发送义务请求来。
13:03
好像有点慢啊。我换成这个fast。再刷新一下啊。还有点慢。这样我直接换成这个啊。刷新一下,但是又太快了是吧,我还换成这个发3G啊,再来一遍。我们稍微等一下吧,看loading是不是直接就出来吧,出完来之后,然后得到这个数据,我现在说的这个问题是什么呀?就是说咱们之前在这个里边说,我们之前在讲这个什么setup的时候说过说这个什么了呢?Setup之前不要使用过think。如果你要是使用了think,这里边返回来的就是promise对象了,你返回来是promise对象,那你想我上边要想用到这个数据,是不是有可能会过一段时间才会显示吧?对不对啊,那我现在能不能用啊,可以用啊是吧,我刚才的第一种写法是直接返回一个promise,象那我的第二种写法是用的是点赞点开方式,那反过来的不也是对象吗。
14:02
那我上面不也正常可以使用吗?但是我们解决了一个什么问题,就是说你当前这个组件里边有异步的操作,里边有异步的数据,这个数据需要在我组件里边去展示,但是这个组件在展示之前。要想清楚这么一个问题,因为这个return这个位置返回来的是一个对象当前组件。里边用到了这个数据,所以说当前这个组件可以看成是一个异步组件,如果是异步组件,那么上面在用的时候有可能会出现空白的地方。那我是不是可以用这个组件来控制一下,在你正常异步组件显示之前,给你显示点别的内容,对不对啊,当然了。这个位置。我们可不可以使用a think函数啊?嗯,哪去了,这样我复制多了啊。啊,这个不要了啊。呃,算了,我这么闪。这个不要啊。好,这样做啊,我把这个塞大。
15:00
注释掉啊,我就在这个setup上面来一个a think可不可以呢?那我如果setup里边来一个呃,A think的前面来一个a think的话,那我这边我就不要了。啊,这个位置。我应该怎么写,我是不是应该在这个位置加上一个什么。是吧,然后在这个位置我来一个count result吧,等于那我后边这个点赞我也不要了。啊,点赞我也不要了,直接就这样来一个result接受并且return返回出一个对象,然后这个对象当中我写成一个date,通过result点什么呢?Date拿到这个数据。对吧?这不就是a think of it的方式吗?同样的,那么我们现在来看我的这个界面,我再刷新。跟刚才的效果一样,不一样。稍微等一下啊,一开始有点慢。我们主要看有没有漏顶啊。
16:00
哎,有漏顶是吧,一闪而过就出现了啊,那所以说啊,这个setup当中返回来的,我用我think away的方式可以,我用点赞点开方式可以,我用点什么啊,我用这个什么呢?Promise直接new promise方式也可以,但是你要注意,无论是这三种方式当中哪一种写法,最终如果要是在组件当中用了啊,它们都是属于一步组件。那我这个位置得需要做一个处理啊,当然说我就不处理行不行,行可以,你只要看你这个用户对你喜欢就行了,是不是啊行好,那这个sus组件呢,咱们就先介绍到这啊。
我来说两句