vue 引入游戏功能组件

之前做了一个系列视频，介绍如何用 vio 三来写一个小游戏，那很多小伙伴说你这个是 vo 二的写法，今天我们就用 vio 三的写法来改写一下。好，我们来看这个代码，我们就以这个 vlog 组件来作为改写， 它有三种啊，主要是提供了一个叫组合式的 api， 它可以在 set up 这个钩子函数中呢，把相应的逻辑都写在这里，可以简写很多模板代码。同时呢，它还提供了一种 script set up 的一种语法堂的方式， 可以让代码写的更加的简便。今天我们就用这种方式来改写一下。我们先把旧代码做一下注释，然后在这里边呢，我们先来定一下 这里的变量，这里的变量呢，就不需要再这样返回一个对象，可以直接在这里定义，然后这里再瘦。但是这个变量呢，需要在模板上使用，需要用这个 raf 呢来声声明一下，给他一个初始值 force。 那么这样呢，这个数字变量呢，就可以直接用到模板上，那底下的这个 star time 呢，他不需要用在模板上，可以直接像普通的变量一样去定义。 同时呢，像这个 monty 的这个生命周期函数，它的写法也不再是写写一个 monty 的，而它用 on monty 这样提供一勾子函数，这里面呢，需要给它 传一个回到函数进去，还是把我们之前的方体的逻辑呢写进去， 这里面可以看到 star time， 就不需要这个地址，在这里的钩子函数也没有地址指针，这个寿呢，因为是用 rap 声明的，所以对他的值的修改只需要加上 value， 然后我们这里需要响应这个点击事件这个函数，这个事件函数呢，也不需要再写，在 mess 这里可以把它直接拿过来当做普通函数来处理。 你看到我们这里的这些地址都不需要 数，这里需要加一个 value。 那么发送自定义事件呢？需要提前要定义一下 view 呢？提供了一个定义事件的一个函数叫 define amates， 在这里呢，我们可以定义自己的事件 and think。 顺便提一下，如果你要想定义自己的组建的属性，也需要用笔放 tops 这样去定义。这里我们没有用到，就先不写了。 这样改写之后呢，就相当于是用五有三的写法来改写的这个某组件我们可以试一下。好，这里报错了，二十二行啊。这里 start time 都不能用常量来定义，我们需要用 light 来给他定义。我们再来看一下点击开始，点击开始非常不错，点击开始非常不错。哎，慢揉蜗牛，这就是 vivo 三的组件写法。谢谢观看，再见。

哈喽，大家好，今天我们来讲一下五月三中的 suspense。 五月三中的 suspense 是一个实验线功能啊，但是我们可以放心的用啊，它这个是接近 react 的啊， 他这个有什么用呢？他可以让我们在逐渐有那个翼步依赖的时候呢？或者翼步逐渐的时候呢？给他一个设置一个加载中的状态，比如说做一个楼顶效果，或者说做一个骨架屏呢？ 那我们就结合这个史分子做个补掉屏的效果啊，我们直接进入代码。好，这里我做这个这个卡片，这个一个 profile 信息显示啊， 代码就这样了，那我们模拟就是假设这个卡片的信息是一个 一部请求得来的，我们首先引入一个 define， 统统的 from you， 我们第一个组件叫这个 profile， 组件呢，等于一个 define component try 一个对象 啊，对象里面我们写一个这个 sink sit up 吧， 模拟请求啊，然后写一个 rend 函数，好把下面这个内容 丢到上面去。 好在这个 sink sitter 里面的话，我们直接偶 white 一个， 你有一个 promise， 你直接用来休眠两秒钟啊。嗯，然后这里可以写的更简洁一点， 然后把这个 profile 直接在下面，看能不能展示出来， 保存看一下效果，刷新页面空白啊，为什么呢？ 我们打空调的时候，空调有一个五月的这个警告啊，这个警告是怎么说呢？他说一个 ctrl 函数返回了一个 pro miss， 但是没有用数字 phones 啊，就是说如果一个组件他使用了这个 sink ctrl 的话，那他必须使用这个数身份包裹起来啊。 ok， 好，我们引入一下这个舒适喷洒，舒适喷洒我们把它包裹一下啊， ok， 看一下啊， 出来了，两秒后出来了，没有问题啊， 那现在我们要怎么做这个骨架屏呢？因为舒适喷子的话，他有两个卡槽，一个， 第一个是默认卡槽，第二个是他的一个 forback 卡槽。但是我这里写使用的是 jsx 语法呀，所以我们这里需要这么写，传一个 对象，对象里面写一个 default， default 就是默认卡槽，默认卡槽我们就使用这个 profile， 第二个话是 four 版， four 版的话我们直接给他一个 d r v， 有一个捞点，我先写一个捞点来简单点的保存看一下。 ok， 没有问题。呃，刷新，他在捞点，捞点，捞点两秒之后显示这个卡片的， 那我们现在就要写这个 forback 这个组件呢，我们定一个这个骨架平的组件，写一个 cons 的一个 scaleton component， 等于一个 define component。 然后呢？ 啊，直接写个函数字组件吧， 我们把写好的这个骨架屏复制过来， 放在下面了，保存看一下，刷新，哎，有问题？ 刷新 啊，这里写错了， 好，保存再看一下。 ok， 没有问题，我们刷新啊，现在这个是骨架屏，两秒之后呢，显示这个卡片没有问题啊， 这个 c e 方形的话， c 它的话我们可以 return， 我们假设这个数据是请出来的，就是这个 name 上面休息两秒钟，其实就是模拟一个网络倾城， 就是模拟一个接口的请求拿到数据，拿到数据的话给他设置出来啊， 上面写一个 water 图像放在里面， 那下面怎么用它呢？一个 lease， 一个 orat， 这里一个 lease， 一个点亮， 这是一个点，保存看一下 没有问题啊。一样的，这里就是模拟，就相当于模拟一个请求，假如这个请求两秒钟啊，拿到数据，拿到数据之后渲染出来，这就是 a think set up， 然后配合这个 suspense 包裹一下啊。如果你使用那个 template 语法的话，如果你使用 template 语法的话，那大概率是这么写的。 如果你使用 template 铝法的话，你就直接一个试 prints， 直接一个这个啊，然后你在这里直接写一个那个， 那下面写，写个 template， 写一个井号 default， 然后把再把这个什么 profile 放进去啊， 这里再写一个 template for bag， 然后再把这个放进去。因为我使用了 g s 叉， g s 叉里面它 他不能传，就是他卡槽传不了，他可以传一个默认卡槽，但是传不了这个，这个托拜卡槽传不了，所以必须要上面这种写法呀，你用那个吞不了语法的话，就就可以这么写啊， 那这里我们还可以呃，对他稍微进行改造一下。我这里是定义了一个组件呢，使用 set up 语法对不对？ but think set up。 我们可以定一个一步组件呢， define a sink component。 哦，我们对这个组件进行改造一下，我们这是使用这个 define a sink component。 那他这里面的话怎么写呢？ 怎么删了？我们写一个箭头函数啊，我们就是 new 一个 promise， promise 里面的话有个 reserve reject。 这个时候呢啊，我们模拟一下网络请求 set time out， 说两秒钟。 呃，他这里面没做的话， 我们直接输出一个标签看一下，就是 profile 保存看一下， ok， 没有问题。那我们对它进行改造一下，我们复制已经写好了， 粘贴 两秒钟没问题，这里把它那个调大一点， 没有问题啊。他这里这个就是 ts， 他红了怎么办呢？我们直接给他加一个标识啊，写一个 jsx， 看到没 刷新 一样可以啊，我们还可以把这部分代码直接就是写到外面呢，写在一个文件上面，比如说我写了一个 profile 里面去啊，写到这个主页里面去啊， 写在一个文件里面去的话，我们就比较简单的，这里就不用写这么多，直接一个就是 input 一个 部分 tsa 字母 不加，看一下保存，看一下刷新。 呃，因为这时候他这个音铺，他就是读取这文件太快了，这里看不到效果。我们可以把网络请求打开一下，就是让他使用一个商机啊，就是刷新 啊，不要停出来了，这个比较快呀，因为 他是这种写法的话，就是一步组建的，就是我们有了一个一步组建的。呃，我们这种写法的话，当他那个编译出来之后呢，他就会单独编译成一个这个，他会 把这个单独切分开呀，会打包成一个独立的文件呢。当他去访问这个页面的时候呢，他会有一个网络请求，会去加载这个这个 profile， 比如说会加载这个义部主页呢？ 对，大概就是这样的。好了，今天的分享就是这样，关注我，教你更多前端技巧。

好，这节课开始呢，我们就来说一下关于组建上的事情，那组建上的事情呢，无非就是副组建引入子组建的方式是什么样的，对吧？然后并且呢还有这个组建之间的传直，比如说父传子啊，子传父啊这些这样一些内容。 好，那么现在呢，咱就把这块整体说一下，那么这块呢，也是属于 set up 的一部分，因为我可能会在 set up 里边去操作，所以说呢，干脆把这块笔记呢就写到 set up 里边了哈。呃，因为是这样的，咱们 已经在上节课说过这个路由了，他是第六块哈，那我现在要写组建一块呢，我就写到了四点八之后啊，就四点九啊，来到这呢，咱写一下这个笔记，四点九就是组建的操作，比如说我们这课要讲的是父传子，那父做什么事子怎么接受，对吧？那我们这呢，现在回顾一下选项式 api 的操作啊，就是我们的 vr 的一些写法。那比如我现在呢要有一个子组件，那我这呢可以先新建一个吧， 那我这新建一个组建，比如说就叫 list 吧，随便写一个啊，然后这呢这是子组件， ok， 行，那现在呢，我要在副组件中引入这个组件，那我这就引 proto， 然后这有个 list， 是吧？然后这有 让我们去找到我的这个对应的路径。好，然后下面是 list 点儿， ok， 然后在这儿呢有 export 啊， part 有一个地方的好，然后这里，哎，地方啊 好，然后在这呢有一个 ctrl nast， 然后再往下，这里边呢有一个 list， 是吧？然后呢你可以把 list 呢给它放到这儿啊， list， okay， 那这样的话呢，我们数据就出来了，是吧？这十五键引入没有问题，那么要给他传直呢，也比较简单，我们可以再定一个数据，比如说呢，就叫 m s j 啊，这是数据，这是传过去的数据。好， 那么我在这呢就可以写一个 m s j 等于 m j， 是吧？然后这儿呢就通过 props 呢进行接收，然后这儿呢我就 s pro 啊，笔放进去，然后这儿有一个 pro s， 当然 pro s 有很多写法，比如说我就直接这么去想哈，我定义他的类型和默认值了啊，然后这儿呢有一个 m s j 啊，这肯定都是没有问题的，我们刷新一下啊，这是没有问题的， ok， 当然这是我们熟悉的 view 二写法，那在 view 三中该怎么办呢啊？ view 三呢，我们可以也这么去写，但是呢，有一个比较重要的东西就是塞大，是吧，你也 也可以直接通过 set up 的语法糖去做，都是可以的。那现在呢，我们就通过几个方式呢来实现啊？第一个方式呢，就是我们直接去写这种语法堂形式啊，写语法堂形式，比如说我这呢直接给他写一个 set up 啊，就是我们这的 set up 的语法啊。好，那么呃，首先呢，我们要引入也是跟之前一模一样的啊，引入，然后引入完事以后呢，就可以直接在这提供了啊，就不需要再什么呃，这个 compoints 啊之类的啊，直接用就可以了。好，我们刷新一下 来，小心。好，大家看是不是呢，比之前稍微方便了一点，对吧？那你要传值该怎么办呢？哎，比如或者定一个值就叫 msj， 对吧？然后这呢就等于二 ef， 它是一个响音的，这是负传过去的数据。 好，然后呢我这地方呢就可以给他写 m s j， 然后等于 m s j 了。好，这样就没有问题了。 ok， 然后呢这个子这儿呢，我现在写 m s j 肯定是不行的，对吧？那我要去接收。那怎么去接收呢？有很多方式，比如啊，我们这 这个地方呢，也是一个 set up 的一把糖。好，那我们就可以通过某一个东西了，比如说我们可以通过这个底饭的 plus plus 啊，就它啊，这有个 view， 这，这有一个。呃， from view 就可以了啊，只不过呢我们是引入过这个插件啊，所以说这一步呢就不需要了啊，我们直接写它就可以了啊，直接写它就行了。好，然后这儿呢，你要写的是这个 m i j， 对吧？那你可以定义它类型，比如它类型呢是一个字串类型，然后它有它的默认值啊，比如它的默认值呢？哎，是一个。 呃，一一吧，我随便写啊，那这时候我们再来看刷新一下。好，你看这数据呢，也都给他拿过来了，是吧？那如果说你这并没有给他传呢，他就会走那一串一的这个数据啊，这就是通过三大法与法行的形式啊，如何传？如何接？好吧，这呢我们就记录一下啊。 呃，那这个地方的腹啊腹，哎，可以这样去传。好，我把这呢都给他拿过来， 然后这个地方的子呢？哎，就可以通过刚才我们的方式去积，当然其实呢还有很多很多的方式。那决定了是你的需求啊，那比如说在他的官网里边呢，他也收到了一个这样东西，我们把这个赛道打开啊， 然后这呢他说 set up 这个函数时，他将接收两个参数，一个是 props 啊，还有一个。好，那我们就先单看这一个 props 啊，他说这个 set up 函数呢，第一个参数呢就是 props， 那这个 pro 词就是什么？就是你传过来的一个东西，我们可以在 set up 里边呢去把它拿到。好吧，那，那什么意思呢？就是你看现在呢，我通过啊，这个负啊，通过这儿 miz 传过去，对不对？你也可以怎么写呢？也可以这样去写。 好，我们就采用选 a p l， 然后这 sport 你放是吧？然后呢就跟他这个官方里边写的是一模一样的啊，首先呢，你这儿可能会写一个 set up 啊，是的，然后这儿呢就有一个 pros。 好，我们现在呢去 consolelog 打印一下这个 pros 吧。好，那么在这儿呢 就可以打印一下 pros， 来看一眼 pros 是什么样子啊？刷新一下。好，这时候呢，在这个地方呢啊，我们有一个 pros， 我打开这个地方的一个 tag 啊，哎，他这并没有显示出来一些内容。呃，这有个啊，没关系啊，那我们就呃先给他啊，这还有一个 pros 没有写到啊，我这呢再写一个 m s j 啊， m s j。 好，刷新一下，我们再来看一眼。好，这时候呢，你就看到这个地方是不是有数据啊啊，这个选项 a p i 呢，就几乎类似了哈，那你也可以针对于这样拿到那个 force 啊，拿到 pro s 的数据啊，就是你 pro s 点 m f j 啊，当然他这也讲到了，如果你传多个呢啊，你也可以把它结构出来啊，通过 to i f s 啊，把它结构出来，比如说你在这地方呢可以进行二次的一些调整啊，比如你可以复个值，对吧？那我假如说不叫 m x j， 是吧？我叫这个 o b g 吧，随便啊，那就可以 i f， 哎，或者说直接放它就行了啊，直接放它，然后这样呢蕊衬出去这个 o b g， 好吧，然后你这样放这个 o b g 啊，上心一下，哎，这样的话呢， 也是没有问题的，你可能会针对于这个值呢进行一些改造啊，或者说，呃，这个二次的一些计算呀，等等一些操作啊，这样的写法也是 ok 的。好吧，这就是我们所说的直接通过依法行式啊，通过依法行式，比如这种啊，或者说呢，你也可以通过选项 api 的啊，这种以及这种啊， 以及我们下面的最后这个，是吧？这个一开始演示这个也是可以的啊，这就是妇产子啊，那在我们这个 vivo 三中呢，灵活境比较高了啊，你有很多写法，那这一不同写法呢，也有不同的操作，但是大家呢？呃，以上那些东西都比较简单，大家至少要记得这个哈，至少要记得这个啊，笔犯的 pros， 这个是比较重要的。 好，那么有关于组建之间的这个内容，比如说父算子啊，父怎么传，子怎么金，我们就先说到这里。

好嘞，上节课呢，我们讲过了动态组件，然后这节课呢，我们就来说一下这个一步组件啊，那到这呢，很多小伙伴就会思考了，哎，啥叫一步组件？他能给我带来什么样东西，我在什么情况下会用到这一步组件，他到底是干嘛的，对吧？ 那我这样呢，我给大家做一个小小总结吧，首先一步组建呢，不管了，是不是和我们组建是有关系的呀？哎，没错啊，要不然怎么叫一步组建呢？ 然后这一步组建呢，其实呢，总结这么几个字，就是来提升性能的，那我们也知道啊，在面试的过程中呢，这个面试官经常会问到，你在六的项目中做过哪些性能优化，那么这个一步组建呢，可能就是性能提高的其中之一。 好，下面呢，我给大家解释一下，他如何去提升我们的性能啊，那当然有很多方面啊，我们这样就一项项去聊，我先给大家说一个比较简单的成 场景啊，就是我们在做 view 项目过程中呢，经常会有套娃这种情况啊，也不要套娃，就可能一层吧，比如说我现在画这框呢，就是我一个网页，那这个网页呢，它的一个大组件叫 home 点 view 啊， home 点 view 好，我就随便写了划了。 然后在这个页面中呢，会引入 a 组件， b 组件和 c 组件，好，都引进来了。那假如说呢，我这个当前的首屏啊，只会加载 a 和 b， 这个 c 呢，可能在第二屏或者第三屏啊，咱们就假设他在第二屏吧， 那用户进来以后呢，是不是如果没有看到这个 c 组件，这个 c 组件就别加载了呀？如果用户，哎，比如滑动这个窗口，那看到了啊，这个滑动网页哈，看到 c 组件，那么再加载 c， 那这样不就提升性能了吗？是吧？哎，这个有点像暗虚引入 是吧，按照需要把它加载进来，如果没有看到就别加载他了，那这样的话不就提升我的性能了吗？手屏的一个加载对吧？手屏加载一个效率或者说速度。 好，那我们总结一下，就是说他可以带来的其中的性能提升之一，就是这个组件啊，如果说用户没有访问到，或者说没有看到，那么你就别加载，如果看到了，那么再去加载，这样就提升我们性能了。 好，那么下面呢，我们就来看一看，具体他该怎么去用啊？知道了他这个东西到底干嘛了，我们就来试试啊，大家看啊，现在在我的后面六中呢，引入了 a 组件， b 组件， c 组件，我们直接引入的通过引号的形式，那这样的形式呢，大家并不陌生，对吧？ 然后呢在 a， b， c 这三个组件中呢，我稍微做点事情啊，我这儿呢就为了演示，我都给他加一个 高度吧，呃，这高度的话呢，就是四百吧，然后背颜色呢？随便来一个啊，我直接在迪奥这写了哈，然后我看一下啊，这高可能还有点高，那我就来个三百，为了演示这个功能。好，然后呢我把这个 b 组件呢也给他加一上，同样这个样式， 嗯，他的一个变颜色，我来一个 blue， 好，这是手屏的两个组件。好，然后呢这个 c 组件呢？呃，我这里边呢就不做太多东西了，我给他呢去弄一个图片 来，那我的桌面上其实呢已经弄了一个图片，我叫它一点儿拼计吧，好，放到我们的这个 src 目录里边儿放进来。好，那在这儿呢，我就 image 啊，把它引入进来一点儿拼计好了，我们去看一下这网页，咳， ok， 呃， 这是 a 组件， b 组件，然后这哪张图？这个图的话大小我给他规定一下吧。呃，宽度值，哎，宽度值我来个三百，高度值我也来个三百啊，无所谓。 好，那么现在呢，我就来看一下，如果说我不做这个义务组件情况下，是不是 a 组件， b 组件和 c 组件都加载进来的呢？没错，我们可以看看网络啊，证明这个 c 组件是加载进来的。大家看图片啊，在 network 这个地方啊，图片一点拼计他有吧，那就证明一定是加载了， 对不对？好，我们再刷新一下，一点拼技是出来的，那延续刚才我们所说的就是说，如果说我现在还没有滑到这，你就别加载了，对吧？我如果说滑到这你再加载啊，没有滑到这你别加载，那么这个该怎么办呢？好，那我们就来看硬度加 义务组建呢，首先你的引入方式不是直接引 part 了，你要一份的 thinker component 啊，那我们到这个地方就要做一些调整好，把这呢就给他先注掉或者干掉了，那我们就直接的把这块代码给他拿过来。 呃，这个地方写的还是有点问题的，拿这个好，然后呢，这个地方名字我们就改成 c 啊，大写的，然后这个路径呢，我们就替换一下。 好，这个呢就 ok 了，当然这个底范的 sink component 啊，它需要在这个地方呢引入，然后这儿呢有一个 view， 只不过我们用过那个插件儿啊，所以说呢，不需要在这儿这么去写了， 这个大家应该能懂哈，就我们在这呢不是用过那个插件了啊，就不需要去写了。好，那么这样做就可以了吗？我们来试试啊， 回到我们的网页中啊，然后刷新一下，大家看是不是不可以啊，一点 k t 它还出来了吧。啊，确实是这样的， 那你加这个东西以后呢，他不能完成你索要这个功能啊，你还要做一些事情。好，那下面呢，我给大家分享一个这样的算是一个插件东西吧。好，我把这个链接呢也给大家放到这啊，这个叫呃， view use。 好，然后呢这地方呢我们去下载一下他所要的这个包啊，来，我们去下载一下 啊，我下载一下， ok， 然后咱们把项目呢启动起来啊，然后呢你需要按照它的一个使用， 首先呢我们得引 part 把对应的这个功能模块啊要引入进来，好，到我们这个地方，那我就在这上面引入了哈，引入进来完事以后呢，看他下面代码啊，我们把这块呢整个的复制粘贴过来。好，然后我做一些小小调整 啊，首先呢他定一个 tigers 啊，然后呢这儿呢又定一个什么？呃，一个这个 force 啊， force， 这 force 干嘛的呢？其实就是判断的，我们可以在这儿呢先写个 d i v 吧，然后呢这在这儿给他写一个 v 杠 f 等于，然后用到这个值， 那大家可以看这个值呢，它上来是一个 force 对不对？我们先不用看 tike 啊，它是一个 force， 那是 force 的话呢，现在我们再去刷新一下页面吧，刷新好，大家看图片，它们就 没有加进来，为啥呢？是因为你这个组件都没有进来，对不对？是吧？那当然，我可以把这个呢放到这。好，他为 false， 这个组件都没有进来， 那你就别提说那个图片了。好，然后紧接他这做什么事呢？他这有个 tiget， 这个 tiget 是什么呢？就是一个呃，动啊，说白就是动物，我们在这呢可以写 if， 等于 tige 啊，你这样写上就可以了。好，写上以后呢？呃，这个地方的第二参数我们可以不要，我们可以不要。 好，然后在这地方我们去打印一下这个参数， 好，刷新一下，大家看着啊，我们的控制台，它上来的是一个 force， 代表什么意思呢？就是你还没有访问到 c 那个区块上，如果说滑动，滑动，滑动，哎，看到这个 c 了，这时候呢，没处了啊，这是没处了，所以说呢， 在这可以做个判断，判断什么个情况呢？如果说啊，如果说这家值为处，那我干嘛？ 我，我可以这么写，是吧？我这个值边出以后呢？我们直接付给这个值，那这样的话呢，他就变为出了，那这地方没出了，就加在他了，对不对？好，我们来试一下啊，刷新 好，然后现在呢，在我的 network 中，这个图片一点儿拼迹根本就没有出来，当我划划划啊，访问到这个组件，大家看一点儿拼迹，他出来了，然后这个图呢也就出来了，那你看是不是这个地方就提升了我们的性能呢？ 啊，没错，这就是他的使用场景之一。好吧，我们把这呢来给他写一下啊。呃，场景啊，使用场景之一，场景一吧。呃， 组建按需引入 这个过程，就是说啊，当用户滑动到了，滑动啊，到了具体的这个组件或者说访问啊， 我们到了组件啊，再去加载该组件或者此组件。好，那这个时候呢，我们就需要这么去写了，在我们的 tablet 的部分 好，把这块呢都给拿下来，然后在我们的 g s 部分 好，然后把这代码呢都给大家去弄一下。 好，那这是我们的场景一。好，下面呢我们再来看啊，场景二，把这呢给他去做一个一点二，好，哎，这应该是十点一啊，好，这应该十点二，场景二， 那么这个东西，呃，他所给你带来的是什么呢？他给你能带来东西？大家来看我们的网络，现在呢，我们看下这个 gs 部分吧。好吧，来我刷新一下啊，大家看啊， 如果说我们是引泡特直接引入的形式，那么在这个地方啊，一定会加载 c 点位由， 好，那么现在呢，我们因为使用了这个 e 部组件，所以说呢，在这个地方呢根本就没有 c 点六，当我滑动的时候啊，再去加载 c 点六。好，这是不是特别好的一个功能啊？没错， 所以说呢，在一定的程度上呢，他就做到按时引入，是不是啊？他就做到按时引入，那么这个东西还可以，这个一步组件还可以干什么呢？场景二，他还可以分包啊，这个呢，我们一会去讲到，好吧，一会去讲到。好，下面呢，我再给大家看一个功能啊，就是说我们还有一些场景是说， 呃，这个 c 组件呢，可能会做一些请求啊，这个方面呢是比较多的，对吧？我们请求数据来渲染的页面上， 那如果说这个数据还没有返回过来，我这应该显示一个加载中，如果说返回过来了，那就把具体的数据给我展示到页面上， 是吧，并且要做到一点，就是说当我滑动到了，那么再去加载该组件。好，那这时候我们该怎么办呢？也是差不多的一个情况，只不过我们先要做 做一个 low 定啊，就是要给他一定的提醒，是吧，加载中等等这样一些内容。好了，下面呢我们就言归正传啊，来说一下这块的一些内容啊，就乘以二了啊，乘以二，嗯，好，那我这呢就拿这个 a 组件来说吧。好吧，就拿 a 组件来说， 呃， a 组件这儿呢，我就不要这个，不要这个滑块了，不要这个滑块 c 组件直接展示了，那我把 b 组件呢给它加的高度大一点，好吧， 好，然后现在呢再回到 a 组件啊，大家看着啊，现在我 a 组件呢要做这个请求，那我在这呢就要写上对应的请求数据的一些内容了，是吧？这呢是塞大， 嗯，好，然后定一个 list 吧，等于 r， e， f， 它是个空的数组。好，然后呢还要提醒一下大家啊，就是如果我们要选项式 a， p， i 的话， 可能会用到 sync 以及 await， 那这时候呢，我们需要这么写，呃，三下，我这儿会写一个 a sync， 然后这儿呢有一个 is 等于 await excels， 是吧，然后这么去写， 但是呢，你直接用三十二分钟语法堂呢，你可以直接啊 wait 不用 think 啊，因为它这地方呢就是一个啊 think 的。好吧，所以说呢，我们家长可以直接用。好，那到这呢，我就把 excels 呢先给它下载一下，因为我要去紧接口啊，那就 i s 等于 呃，这个 wait， 然后是 excels 点 get 好，我去发送一个气球，然后最后呢 is 的 date 的 date 的 list， 然后附给呃， list 的 value 啊，然后呢我把这个数据呢就展示到我的 a 组件里边，那这是我的 list， 好，那我们就等待他下来， ok， 完事了，那我这 呢就需要引炮他一下 excels from excels 了，是吧？好，然后呢我去拿一下这个接口数据啊，嗯，这个接口数据在这 啊，这样呢直接可以 get， ok， 那到这呢我们就来看一下吧，刷新好了，此时此刻他就出现报错，看到没有 什么样错误呢啊，就是说他需要让你通过这么一个东西呢包裹起来，这也是 vivo 三所提供的系统内置组件，那在他的官方文档中呢，也强调到了啊，我们可以直接用到他，好吧，那么到这呢，我们就需要把它包裹起来， 包括起来以后呢，刚才我说到了，你可能会有两种情况，一个呢是这个东西可以直接进来，另外一种情况就是他在加载中你要提示个信息，所以说呢，我们这可以这么做，就是用这个 插槽形式啊，然后这是成功的，对吧？这是加载完事的啊，如果说，呃，他这个加载中，那我提示一个加载中。哎，加载中。 好，那这时候我们再来看这个页面啊，刷新，大家看到没有，有一个一瞬间的加载中啊，邦出来这个东西， 是吧？所以说呢，我想告诉大家的一个情况就是，呃，这个 e 部组件啊，那当然，我们这样的其实应该要写成 e 部组件的，就是这个 a 啊， a 要写成 e 部组件。 好，那当然若如果说我先不写一部组件，那我们先来看一下吧。啊，在网络中刷新一下，那这个 a 点 view 它肯定会出来，对不对？它肯定会出来。 好，然后呢他这呢有很多的信息。 ok， 呃，我刷新一下吧。 呃，这并不能看出来 a 点 view 啊， think 能看出来是吧？呃，这 a 点 view 它其实怎么说呢它肯定是引不进来的啊，在这个地方。好，这样吧，我还是给它弄成一个异物的吧，好，刷新。 好，那这个时候呢它也是同样出来的，那你这么做有什么样好处呢？哎，不就是做了一个提醒吗？对吧？你有一个加载中啊，我可以把我的网速呢给改一下，改成一个三 g 啊，好，闪现一下啊。这个呢就有点慢了啊， 稍等。嗯，他这个速度太慢了，这可以做到什么呢？ 这个组件它也是溢补的，它可以做到分包的处理，它其实呢也是一个按需引入啊，加载中，大家看到了哈，然后过一会等它加载完事。 咦啊出来了啊，有点慢啊。行吧，我给大家回到。呃我们最好的这种形式啊。好，大家看到这些功能是吧。好，那这样情况下呢你可以结合啊，这个内内置组件可以继续用， 我们把这个先写到这，在我们的 skirt， 然后这有一个塞踏， 因为写到这，那么这个有什么好处呢？首先如果说你的 a 组件本身是 assent wait 啊，就这种翼步的操作或者说 promise 啊这种翼步操作你不加这个内置组件 他都会出现一些警告对不对？而且数据出不来了，所以说你必须要用它。好，那么这个东西能所给你带来的这个功能是什么呢？啊？注意啊，这样你不用的话就会报错了哈，他可以解决，他可以给你分包。 分包？分包什么意思呢？就是我们的一个 home 点六中引入了 a 组件 b 和 c， 对不对？如果说这个这个这个不是一步的，他最后打包完事是一个点 gs 文件， 你如果说这个是一步的，或者这个是一步的啊，或者这俩是一步的，他会单独的给你打一个包，比如说叫 a 点 gs 啊，这个叫 c 点 gs， 他会单独给你分包。那这样的话是不是从你这个大的这个包里边把这个抽理出来了 啊？当用到的时候再加点它，你想啊，如果说我不做一步的，是不是全部都打在这 gs 里边，这个体积又过大， 但是呢，有些代码可能都用不到，但是你会都加载是吧？当我把它抽离出来分成包以后啊，分包了是吧？把你的这个某一个功能啊，某一个这个组件中的 gs 代码，我抽离出来一个单独的包，当用到它再去加载，是不是这样会提升很多呀？啊，所以他在我们打包的时候 会做这样的一些内容啊，包括在他官方里边呢，官网里边也说到啊，我们去看一下。呃，在这他说， 呃，在大型应用中呢，我们可能需要将应用分隔成小的代码块啊，并且呢需要在，并且在需要的时候才能服务器加大一个模块，从而实现这个效果，是吧？你看啊，现在我就给各位去打包啊， 呃， n p m wrong， 好，注意，现在呢，我的 a 组件是不是已经是一部的？我这个 c 组件是不是也是一部的？好，那这时候我们去看。 呃，在我的这个 disk 里边啊，好，大家看， c 和 a 就被单独打出来了，而 b 没有啊， b 没有 b 点 g s， a 和 c 就被单独打出来了，就把它俩抽离出来了，要不然你不抽离全部在这里边。 好，他可以做到一个分包的处理啊他可以做到分包处理，打包分包处理，其实这也是按需的引入啊，这也是按需的引入。呃，这个使用场景我们就写一个十点三吧。 呃，比如说 n p m 让 build 打包完成后， e 部组件有单独的 g s 文件，是从主体 g s。 啊，分分分包出来的，比如说有这个 a 点啥啥点 g s 以及 c 点啥啥点 g s。 好，这是特别好的一点，对不对那？呃，我相信有些小伙伴呢可能还会想到说，哎哎，这个地方我打爆了， 知道，刚才我们的第一个模式啊，就是这个 c 组件，对吧？这个 c 组件，呃，如果说我正常加载，我先把这干掉。正常加载是这张图吗？对吧？正常加载是这张图 啊，如果说他没有加载出来时候，我也显示个加载中，该怎么办啊？也是可以做到的啊，你就把这个包裹起来就可以了。把这个包裹起来，呃，然后这个胎给他放到外边啊，好，呃，然后这个 c 给拿过来，然后把这个放到外边， 这样也是可以的啊，这样也可以啊，插进一下。呃，这个地方是没有我，我写一个这样数据吧，让他进行一个展示，要不然他加的太快了。 嗯，这里边我就写个 c 组件，然后这写一个 list， 这样话让他加点慢一点啊，别太快了。好，稍息。 呃，大家有没有看到？哎呀，有点快啊，高速三 g 吧，好，刷新一下。 嗯，大家看啊， a 组件会有个加载中，然后你看这你看这有个加载中 a park 出来了是吧？这个也是可以做到啊，你可以混着去用，当然，呃这里边布局什么的你也可以去自己去弄是吧？或者说单独引入一个 loading 的组件都是可以的。 ok， 比如说我这有一个什么 呃 loading 的组件也是可以的啊，当然这个 a sink。 呃这个地方的 sink component 啊，它还有很多写法，不过我们在公司要用的话呢， 呃不会说在这里边再去去写，比如说有一个 time out， 这个时间三千毫秒，一般规章啊都是我们通过这样形式去做好吧。啊，因为原因呢，就是让他分包，这样的话会更好，当然，呃我现在如果说不分包不分包，那么我也可以给大家去看一下不分包的情况下就不做 做这个一步组件啊，不做一步组件我们就单独再打一个吧，让大家看到这个效果是吧？嗯，那这个项目就需要。呃这样我把它的 s r c 呢？ 呃复制一下儿吧，这个 a b c 组件我给它 a b c 组件到无所谓。可以可以，不用去修改，我把这后面点 b 我修改一下。好吧。哎。怎么碰到桌面哎。行，那放在桌面，放在桌面。 好，这个放到桌面了，我做了一个备份。啊。好，现在呢我就把 a b c 组件呢不做成异物的。好吧，我们直接就是引炮的这种形式， all。 嗯，然后下边这儿也是一样，这个我就都不要了啊，我只是给大家做一个演示哈，然后这儿有一个 a 啊，当然你那个 a， 哎，算了， a 我就直接这样引吧， c 和我，我也这么这么直接引吧哈，然后到这我们就打一下，好， n p m rom 丢 好，直接打，然后我们去看一下这儿的一个 dist， 好，打开，然后这里边好 a 点 g s 和 c 点 g s， ok， 没问题啊，然后现在我把它呢再给它 呃，返回一下，然后把 home 这啊，然后这个地方给它改成 a， 好，现在呢，我就不做一步组件了啊，不做一步组件了 好，直接就是以 pro 的这种形式来再打走，我们再来看 dista。 好，你看是不是全都打到一一个这个 index 里边了。好，所以说这是一步和不一步的区别啊，如果你单纯的只是把它作为一个一步的，那它就单独的抽离车一个包好，但是没有具体的一些 怎么说呢？没有具体一些按虚的功能， ok， 你要做按虚的功能的话呢，你还要去加代码，但是呢，如果直接用 defin 的 sink ctrl 啊去这样的一步赢这个组件，他确实可以做成分包哈，这点呢，大家要切记，不过一般情况下呢，我们都是 啊，就是，大家记得吧，就是我们在一个项目中呢，哎，没有三种啊，几乎都会直接一步去引入每一个这样的组件，几乎啊，几乎。 呃，然后呢，其次呢，就是因为分装会让他性能会提高嘛啊，然后呢，其次就是你可能第二瓶第三瓶的也会用到刚才我们说的滑动到了以后再去加载，对吧？好，这是我们所说的东西啊。好，那这个是我们的 e 股 啊，到时候大家看这个笔记就可以了啊。行，那有关于一部组件呢？我就给给大家呢，先说到这里。

好，注意看，我们静态页面上呢，有这么一个星级评分，它的 atm 呢，非常简单，就这么几行，它的 c， s， s 呢，也非常简单，就这么几行。 现在我们考虑一个问题，就是我们的页面上啊，到处都可能会用到这个星级评分，还不光是这个页面，将来别的页面也会用到，那怎么办呢？那按照过去的做法，我不得不去复制这一块代码，多复制几遍呗，对吧？复制一次，那就用了一遍呗， 这样子做呢，也不是不行，只是呢，恶心，这只是一处星级评分而已，你考虑到页面上这么多的区域，你能都这么干吗？ 而且呢，现在还不涉及到 gs， 涉及到 gs 更麻烦，你光复制个 atml， 那 gs 咋办呢？他控制的到底是哪一个区域呢？所以呢，按照之前的分析，这应该进行怎么样主见化？那么既然我们讲的是 view， 那么以无忧的主见化为例，看一下在无忧里边，如何来把这个区域提成一个主见。首先呢，我们写一段 gs 啊，导入这个无忧。 好，接下来我们来定义主见。定义主见呢，你可以把它想象成为函数，声明你得先有一个函数，然后再去调用，再去使用他，对吧？主见也是一样，你先得有这么一个主见，如何来定一个主见呢？其实主见的本质就是一个对象，你可以用个变量来接受一下。 其实严格来说，这个对象呢，叫做组建的配置对象，真正的组建呢，实际上是一个无 you kongpoint 的实力，所以很多人呢，把这个玩意直接把它当做组建，这是不准确的。 严格来说，它应该叫做组建配置，通过这个配置，唯有会自动帮你创建，唯有 component 的实力， 这个玩意才是真正的主见。不过一开始呢，我们先暂时不考虑这个，以后我们分析到 vivo 的进阶部分呢，再去详细聊这个东西。好，那么这个玩意既然是一个配置对象，他到底配置啥呀？其实呢，你们在之前学习 ville 的时候，刚入门的时候是不是一定用过这么一个代码？这个玩意是不是就是一个配置对象啊？ 这里边是不是可以配置 el， 还可以配置什么 data， 还可以配置 message， 对吧？那么现在我告诉你，在组建的配置里边跟这个玩意差不多有一些区别，但大体上差不多，我们在一开始学习组建的时候，不仅要学习组建的各种概念， 在代码层面呢，就是要学习这个配置该怎么去玩好。那么首先呢，我告诉大家第一个配置就是 template 组件用来干嘛的？来抽离页面中的一个区域的，对吧？那么这个区域里边不得有 atm 吗？ 那么这个 it 面在组建里边可以表现成为一个字符串，这里边其实有些深入的东西，我们后续再聊，你先可以简单的理解为他的 it 面就是一个字符串， 所以呢，我们既然是一个星级平分的组件，我们就把这个组件的 itml 给他粘过来，好一个最简单的组件就制作完成了，这个组件里边其他啥也没有，就封装了一段 itml， 整个形成了一个配置对象。好，写完了之后保存，我们来看一下页面上有东西吗？是不是啥也没有？ 为啥啥也没有啊？因为你只是写了一个普通对象而已，这只是一段再普通不过的 gs 代码，它里面有一个属性叫腾不列车，怎么样嘛？不会发生任何事情的。 所以说接下来呢，你要使用这个组件有一个前提条件，你就必须得让吴佑知道。哦，原来这个玩意是一个组件的配置，我还以为你写着玩的呢，对吧？ 让无忧知道。那么这个让无忧知道的过程呢，就叫做组建注册，得告诉无忧他是一个组建配置。那么如何来进行组建注册呢？有两种方式，第一种呢叫做全局注册，我们可以使用无忧构造器里边有一个方法叫 component， 传入两个参数，第一个参数呢是一个置物券，给组建取一个名字。 第二个参数呢就是组建那个配置对象，你可以把对象直接写到这，也可以呢，像袁老师这样子，把它定义成一个变量，把变量名写到这不一样吗？然后就是给他取一个名字，取啥名字？你随便呢，比方说我给他取一个名字叫 star read 啊，用短横线命名法。那么这句代码的作用就是告诉无忧，听好了，我现在大声的告诉你，有这么一个组件，他的名字叫做这个，由于我是全局注册，所以说将来在任何其他组件里边，只要你受无忧的控制都可以 使用这个组件，如何使用呢？啊？到界面上去，只需要以组件的名字作为标签名， starrate 完事了，你看是不是就出来了。目前天文的感官呢？就是他会把这个组件里边的 atm 代码渲染到这个位置，没问题吧？那如果说我们要做多个星级评分呢？接着写呗， 保存，你看这里多个了，哎，这这样的代码结构是不是更加的简洁好，这是第一种组建注册的方式，第二种方式呢叫做局部注册。 局部注册如何来书写呢？我们需要在具体用这个组件的地方，比方这里我们要在唯有实力里边用这个组件，那么我们需要在这里边去写个配置，叫 component， 写的方式也一样，用他的属性名作为组件的名字，用组件配置对象作为属性的值，对吧？你看跟这里说道理是一样的，给组件取个名字，然后呢， 组件的配置对象，这里也是给组件取个名字，然后组件的配置对象，那么这样一来，在这个实力里边也可以使用这个组件保存，你看仍然有效。那么至于说这个全局注册和局部注册到底有什么样的区别， 将来我们在开发当中到底使用全剧注册好一些呢？还是使用局部注册好一些呢？这个问题先暂时放一放，因为这一块涉及到一些工程化的知识， 袁老师可以暂时的告诉你，在开发当中尽量使用局部注册，少去使用全局注册，将来呢我会进行详细的解释。 路得一步一步走，知识呢得一口一口吃。主见是一块非常庞大的知识，不过呢，通过这节课，我们已经能够初步的体验到主见的威力，就这么一个简单的主见，他就可以减少我们很多的代码。当然这个主见里边还有各种各样的问题，我们一步一步来处理。

v u e 二、性能小优化目前代码块中包含了两个子组件，他们在符合条件的情况下才会渲染，采用了最基础的方式进行导入。页面刷新后会加载五个文件，在点击显示两个组件时只会新增一个文件，加载的是 illam 的字体文件， 也就是说在页面初始化时就已经加载了组件文件，现在我们把它改写成一步组件，再来做个对比。 当我们显示组建时，控制台会新增一个请求，这时才会从服务器请求的需要显示的原文件。另外一个组建也是同样的原理。这样做的目的是 在手屏渲染时减少加载文件的数量，在需要用到一些组件时才会从服务器获取，而且不会重复请求，可以有效的减少白屏的时间。接着来看一下路游览加载，目前这种方式项目到后期 dravascript 包会变得非常大，影响页面加载。 而揽加载简单来说就是延迟加载或按区加载，即在需要使用到路由的时候才进行加载。常用的路由揽加载一般有两种， view， e 部组建和 e s 中的 import。 不过这样写还是不够太简便，我们可以写一个方法，将路由组件一次导入，需要将目前的代码注视掉。需要注意的是，配置存件下的组件将会一次性全部导入，可根据需求来选择方案。 这里的 rose name 需要与组建名称一致，不然无法导入， 最后将路由导出即可。以上就是本期的小分享，如果有不对的地方，欢迎在评论区指出。

打开阿里巴巴史亮图标网站，进行首页图标的搜索，选择符合自己预期的图标，添加到本地库，查看已添加到本地库的图标，点击下载代码按钮，下载史量图标到本地，这是解压后的文件。 拷贝图标样式文件到项目工程内，项目引入对应的样式文件和 grpas 对口文件， 鼠标的最终效果。谢谢观看。

学习一下 view 中的动画组建，并做一个别致的注册表单。 外面盒子和标题很简单，主要是看输入框部分。 先定义好一个输入框和按钮的样式， 这时候创建多个输入框，并创建一个 j s 变量来控制显示隐藏 给输入框包上动画组件名字为 up， 然后就定义过渡前和过渡后的上下移动效果。 定位修改为绝对定位就不会扰乱布局。 最后再添加一个成功提示 nice。