vue父组件加scope子组件影响吗

如果我们想让副组件的数据在子组件中显示，需要通过副组件给子组件传递数据。 和 v 二一样， v u 三同样支持 props 的组件通信方式，只是语法上出现了一些差异，副组件传递数据还是使用 v 杠班的指令。此组件通过 define props 进行接收，里面可以是一个数组或对象。 在父子组建通信中，这种方式也是最常用的。现在只要父组建的数据发生改变，子组建也会实现同步变化的效果。 当子组建希望副组建的数据发生改变，则需要通过方法 去通知副组件进行修改。调用 defining meets 并定义要发射给副组件的方法， 副组件则需要绑定此组件定义的事件和 v o r 简直是一模一样。 下期接着来看 vigo model 的通信方式。

好，上节课呢，我们说过了，这个组建传职的父传子，然后这节课呢，我们来说一个相反的，就是子传父哈，来到这呢，我们就写一个四小时，然后这是一个子传父啊，正好是一个反的操作。 行，那下面呢，咱们就来回顾一下，二点差的时候，就是选项是 api， 我们具体怎么做的啊？行，那当然呢，我们先把这个组件给引进来啊，就是引 prot， 然后有一个 list， 这有一个 from 第二杠啊， con pony 四下的啊，这个 list 点六 ok， 然后这呢有 astrot 啊，比方 好，然后这个地方呢，有一个 ctrl phone 意思，然后这里边有个例子，是吧？那这样的话呢，我们的词组件呢，就引入进来了，那下面呢，我们来回顾啊，就是，呃，在二点叉的时候，有选项是 a p r 的时候，我们怎么做呀？是不是通过 a b 的去传呀？对吧？那这样呢，我们可以定一些数据啊，比如说就叫 a m 吧， 那就 sport， 然后这儿有一个 defense， 然后这儿有个 date， 是吧？这儿有一个 a o m 啊，随便写一个十啊，然后呢，下面呢，我就写一下这个事件啊，比如说有八个按钮，然后这呢有一个 click， 然后这是一个按钮，随便写个名吧，叫称至，呃， l m 啊，称 l m ok， 然后往这走， 那我们传的话呢，无非就是通过倒数 a 米的去传，对吧？记忆的一个实践名，我就叫 fn 了，其值呢就是 am 好，然后其次呢到负这呢，我就可以通过圈 afn， 注意你这写的是 fn， 那我这必须要写 fn， 是吧？然后这个名呢叫称之哄吧，随便写一个好，然后到这呢有一个 messy， 然后有一个，甚至 home 啊，这儿有一个 n， 然后可以 console 点 log 打这 n， 而这个 n 呢，就是刚才我们传过来的，你这地方是 十，那我这呢，接收到的肯定就是十，对吧？这 n 就是十，好，我们来试一下啊，来打开我们这的一个控制台，我刷新一下页面啊，打开一下控制台， 好，点一下，走你。哎，这个十就拿到了，对吧？当然你也可以做一副值，比如说你原本呢，是有一个 n 的，对吧？那你这呢，有一个 n， 他为零，然后点下呢，做一个复制操作啊，乱七八糟都可以啊，比如这样的，是吧，来刷新一下，然后点，哎，这样复制过来了，是吧？确实呢，我们的副组件已经拿到了，这是我们过去的一种写法。好了，我就把这注了。啊， 那现在到 vivo 三中该怎么去写呢啊？有两种形式对吧？咱之前也说过了，一种呢，是通过 set up 这种语法旁的形式啊，另外一种呢，也是通过选项是 a p i， 只不过呢，你直接可以在 set up 里边去写，比如说这样的， 这样，哎，可以，是吧，两种情况啊，那我们 set up 一会再说。好，如果说你要通过这样，虽然说也是选项是 a p i， 就不用 set up 了，该怎么办呢？一样的，比如说我在这呢，有一个 light， a m 等于 r e f， 随便写个一百吧，行吧。 然后这呢，有一个称至 n m， 那就 cost， 哎，等于好，然后这地方该怎么写呢？好，那就看一下 api 呗，然后我们找一下这个赛踏好， 那上节课我们说了， set up 呢，它有两个参数，一个是 pros， 这个就不用再介绍了，对吧？还有第二个参数，那这个参数呢，其实是一个对象啊，我们可以往下看， 那你可以直接传这个对象，然后就可以点，比如说 a b 的就等同于刀尔夫 a b 的，或者说呢，你可以直接把它结构出来，大家看看吧，直接可以结构出来啊， e s 六的结构负值嘛，那刀 我们可以写一个 pros， 然后逗号，对吧？一个 amy 结构出来，那我这个地方啊，就可以传了，比如说就叫 f n， 其值呢，就是 n m。 好，那我们就可以把这个 n m 以及甚至 n m 给它 return 出去啊，就是我这儿定义的这个变量和这儿的这个函数。好， 然后到这地方呢，也是一样啊，你用到它了，你就可以去接收，比如说这有个 light， 他，然后或者抗死，无所谓哈，这样呢，就可以打印那个 n 了，就是我们那个 lm 啊，就一百，好 reach 他， 那这样写起来呢，就相对来说比较繁琐了啊，但是呢，确实也可以实现哦，我们这的这个组件没有去引入，要把组件引入进来，要不然那个组件都展示了，是吧？好了，来看一下啊，来点一下，好注意，这也出来了，对吧？这也出来了， 只不过呢，他是这个一百在歪六里边，所以说呢，你要点歪六啊，点歪六啊，去打印，来到这点点点点，是吧，也就都出来，好注意，这呢，其实有一个警告的啊，有个警告的，大家下去呢，可以看一下这警告大家大体是怎么回事啊？你看这个地方啊，他有个警告， 那正常来说呢，其实也不会这么去写啊，就是我们在项目里边或者在公司里边做项目呢，几乎都会用选项。是啊，那个组合是这一篇就赛大法与法堂的形式，那赛大法与法堂的形式呢，就要换一种写法了。好，那我们这呢就先写上这个赛大法与法堂啊，这有一个赛啊， ok， 然后这呢也是一样。 好，我们就先来说子该怎么去做啊，那首先我肯定有一个这个 a o m， 对吧？它的值呢，我就写二百吧，啊，值就二百。然后呢，我要，呃把这个试卷也写到这啊，那就是 cons。 好，那我就要这儿写，应该按道理来说应该要写 emit 了，对吧？那这儿 f n 之类。好，咱们来看 set up 这种语法堂应该怎么去写，大家呢？可以点击这个 a p i 参考。然后呢在最下边这呢有一个 script， set up 好点进去， 然后在这呢他有很多的一些说明，比如说啊，他说了这个底翻的 probs 和底翻的 amys， 对吧？其实用就是他啊，用就是他，那他有很多写法，比如说你可以不用 ts 这种去写或用 ts 方式啊，都是可以的啊，用 ts 呢，就是你需要写个语言了，我找一下啊， t s 的啊，就在这个地方啊，你就需要这么去写。好，那我们就可以这样写一个语言，比如说叫浪 t s 啊，后面会学到哈，那你在这呢就相当于说这么去定义。好，那我这呢给大家说一下这个地方的 内容啊，就是，呃，称职呢，是一个名称，你可以换成叫称职 am， 或者叫也叫称职 am， 叫 fn 就行了。然后其实 id 呢，它定义类型是吧？就是一个 number， 就说白了是数值啊，所以说呢，你要用它的时候呢， 就这么就用啊，然后名就是 f n 啊，名就是 f n， 然后其值你可以随便定一个，就这个意思啊， 当然，其实呢还有很多很多写法，比如说你可以直接这么去写啊，啊，都是可以的，那当然这样的 props 呢？就是，呃，我们要传，然后进行接收了啊，这是 inits 啊， inits， 好，那么在这呢，咱就可以直接用它啊，比如说我这儿写 fn， 呃，这是定义的 fn， 然后其中的值呢，我就随便写一个吧，比如说就是走 am， 那 am 的话呢，就是二百嘛，对吧？就是 if 的这个二百。好，那这样写没有问题，注意你的名呢还是 fn 啊，那到这呢，我们也是一样的 去用，那就在这个地方要写的是 f n 啊，名称就是叫称之 home 吧，称之 home 啊，然后到这儿我还是要把那个子午线引入进来，那我们就可以直接 constant 写这个了，然后这儿有个 n， 好，我们可以 ctrl 点 vlog 去打一下这个 n 好，刷新，应该拿到二百就对了，对吧？好，这时候呢也是一个他，然后这呢有一个 y 六，是吧，你可以点 y 六去打印这个最后的值来走这二百。 好，所以说呢，有不同的写法啊，有不同的写法，那我们后面呢会讲到 t s 就是 tax 的啊，到时候呢，我们会用这种方式去写啊，那就提前熟悉一下啊，后面也会讲， 那让大家知道，其实呢他有很多的写法，反正还是原来的道理，对吧？就是通过 amit 嘛，只不过这 amit 呢是换一种写法啊去写， 然后至于他的思路呢，都是一样的啊，负呢，就是通过这样去接啊，我把这个呢就整体放到这了啊， 然后下去呢，大家尽量要把它这儿的这些什么 a p a 啊，都挨个儿去看一看，是吧？它其实呢也说明了就是仅限 type street 的功能，然后这儿呢也说明一大堆，大家下去也可以看看。 那后面呢，我讲 t s 就会用 v s 扣的这样的编辑去给大家去看它的里面的原码啊，那我这呢就先拿这种轻量级的去写吧，就是这个 sablin 啊， 行，那大家以熟悉为主啊，换汤不换药，还是那点东西是吧？好，然后呢下面本身要讲的是兄弟之间的一个传职了，那这个呢，我们就放到后边好吧，因为还有很多很多一些概念，比如说依赖猪肉啊等等这样一些东西啊。 呃，我们就放到后面去给大家讲，那父传子以及子传父，我们就先说到这里。

在使用 view 二的时候，我们可以利用 event bus 事件总线实现任意组建通信，但是 view 三中对应的几个 event bus 相关事件却被移除了，取而代之的是第三防库 meet。 meet 是一个很轻量级的工具库，大小只有两百币，不必担心会增加应用程序的负担。来看一下它的基本使用。首先要在 view 三项目中使用 npm 或其他方式安装， 安装完成后就可以进行挂载，你可以定义局部或全局的方式来使用。为了使用方便，我采用的是全局挂载。 现在要求是对这两个兄弟组件实现通信，点击兄弟一组件发送按钮给兄弟二组件传递数据。导入 get current instance， 可以用来获取当前组件实力，获取我们所挂在的全局变量 meet bus， 并定义一个变量来接收。 调用 meet 身上的 meet 方法去发布一个事件， 来到另外一个组件，利用望方法订阅一个具体的事件，就相当监听我们所发布的事件，只要发布的事件被执行，他也相应的被触发。 如果定义多个组件进行通信，使用方式也是一样的，我们来看下效果。 最后要记得在页面销毁后解绑发布的事件。

好，注意看，我们静态页面上呢，有这么一个星级评分，它的 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， 写的方式也一样，用他的属性名作为组件的名字，用组件配置对象作为属性的值，对吧？你看跟这里说道理是一样的，给组件取个名字，然后呢， 组件的配置对象，这里也是给组件取个名字，然后组件的配置对象，那么这样一来，在这个实力里边也可以使用这个组件保存，你看仍然有效。那么至于说这个全局注册和局部注册到底有什么样的区别， 将来我们在开发当中到底使用全剧注册好一些呢？还是使用局部注册好一些呢？这个问题先暂时放一放，因为这一块涉及到一些工程化的知识， 袁老师可以暂时的告诉你，在开发当中尽量使用局部注册，少去使用全局注册，将来呢我会进行详细的解释。 路得一步一步走，知识呢得一口一口吃。主见是一块非常庞大的知识，不过呢，通过这节课，我们已经能够初步的体验到主见的威力，就这么一个简单的主见，他就可以减少我们很多的代码。当然这个主见里边还有各种各样的问题，我们一步一步来处理。

好，接下来我给大家展示的东西，它不仅仅是无忧的知识体系，同时也是无忧的学习路线。袁老师不能在抖音上把每一个无忧的知识点面面俱到的全部给大家讲完， 我只能占一小部分来讲，因为时间有限。但是呢，我会给你们指明一个 view 的学习方向，对于一艘正在航行的船，航向永远是最重要的。 首先我们就是 view 的入门，在入门阶段呢，我们要解决一个问题，就是你得知道 view 它到底是个啥？ 这边涉及到了无忧的一些基本知识，像什么模板的基础语法呀，属性绑定该怎么写，大胡子语法写在哪，事件该怎么注册，然后还涉及到无忧实力里边一些基础的配置，像什么方法配置在哪， 数据该怎么配置，当然还涉及到一些数据响应式啊，虚拟多么的一些基本的知识，那么经过这一块你无 就算入门了。接下来就进入到五六的重头戏，也就是我们这十几节抖音课给大家介绍的内容就是组建。我们这十多节课呢，主要是集中在这一块，组建的基本使用方式，怎么创建，一个组建怎么注册，以及它里边的属性和事件， 这是我们这十几节抖音课搞定的事，但是组建没完哈，组建里面还有很多的知识都需要大家一一去学习，这里边的每一课知识都是为了解决实际开发中某一方面的问题，技术领域里边的东西没有任何一个东西出来是搞着玩的，全都有它的使用价值， 到底他是啥，到底怎么用，他解决什么问题，就是同学们以后要学习的目标，好入门和组建。你学完之后啊，你就可以使用五一做一些小的东西了，但是距离真正的企业开发还差得远。接下来呢，你要完整的理解五一 模板里边各种语法的细节，在模板里边，他还给我们提供了很多东西，什么修饰服啊，过滤器啊，指令啊和 rife。 随便举个例子，比方说你们以后在五一开发过程中可能会用到一些跟接跨瑞相关的库，接跨瑞跟五有冲突吗？一点也不冲突，怎么结合？很多时候都要靠这个东西。 还包括我们有可能会抽离一些公共的功能，比方说图片栏加载，那么这些功能我们会把它作为自定义指令。无忧给我们提供了很多指令，像我们平时用的 v band 就是一个指令，什么 vivo 也是一个指令，包括事件注册那个 at 是吧？他是个语法堂，他实际上呢，是 vr， 他们都是指令，我们还可以自定义指令来完成一些我们想要的操作。好，当你把前三课学完之后啊，无忧本身就没啥东西了，但是我们学习无忧就学一个无忧本身吗？那也不行， 我们说无忧是一个全家桶，尽管他的生态不形容艾特那么多，但是呢，内容也不少。首先就是脚手架，官方给我们提供了两个脚手架，一个是 viewcalley， 一个是位置。到底学啥呀？小孩子才能选择成年人全都要，因为有些公司用的是 viewcalley， 有些公司用的是位置，全都在学。 如果说这两个玩意还不能满足你们公司的要求的话，那你就得自定义无忧工程这一块呢，就涉及到工程化的知识了。还有就是调试无忧要用到的 day two， 你不能啥都在控制台里面去打印吧。我们知道对于一个开发者而言，调试的时间几乎占到每天开发时间的百分之六十，如何来提高调试效率，得借助一些工具，那么 do two 就是一个非常好的工具。然后就是路由用户又开发了，往往是开发单页应用程序，但是在功能上呢，整个系统它又包含了多个页面，每个 页面实际上就是一个组件，如何在组件之间进行切换，如何根据不同的地址显示不同的组件，以及页面挑转的时候如何进行健全和拦截，这些都是 rooter 要解决的问题。 还有一些数据共享的问题，在整个庞大的主线数里边，我们如何在两个毫无关系的主线之间进行数据共享，他们使用同一块数据，而且那个数据变了之后呢？用到这个数据的主线全部自动重新渲染，他是如何做到的？我们应该使用什么样的技术？ 就是这一块要解决的问题。那组建库就不用说了，特别是在开发一些中后台应用的时候，我们不可能有那么多精力去一个一个自行编写组建，我们可以使用一些现成的组建库来提升我们的开发效率， 比方说像什么 animate ui and d， 还有移动安的命程 ui 啊等等等等，非常之多，选择哪一个不 成问题，因为你只要精通了一个，其他的都触泪旁通。好，那么接下来就是无忧三了，很多同学说这个无忧三，无忧二，我到底选择哪一个呀？你为啥要选择呢？就像无忧和 rex， 你为啥要选择呢？ 你全都要不行吗？ vo 三是这几年比较火的一个版本，基本上的新项目啊，大部分是用 vo 三搭的，但是三年前的项目咋办？不要了，三库跑路了， 升级别再没有动力，升级运行的好好的，我为什么要花几十万的成本来升级呢？所以无忧三将会和无忧二长期共存， 所以学习顺序上先精通无忧二，无忧三水到渠成。那么在学习无忧三的时候，你重点关注他相对于无忧二做的哪些变化，你只要精通了无忧二，无忧三非常简单，同时呢，我们也会有一些面试题，对吧？像什么无忧三和无忧二有什么样的区别啊？从这几个方面去回答，就涵盖了数 左右的点了，那么最后搞定框架的笔面式，在无忧这一块会出各种各样的笔面试题，对于别人不会的呢，你得会，对于大家都会的呢，那你得回答的比别人更加精彩。你没有这些能力，你怎么去拿高薪啊？ 凭什么呀？好，那么对于整个无忧的知识体系，在咱们的课程里边，袁老师的做法是通过多门无忧课程，从不同的角度来对无忧做一个全面深刻的解析。首先在最开始的时候是一个无忧的零基础入门，在这一块我会使用一个贯穿始终的项目来对无忧的整个知识做一个全面的讲解。 然后我会针对这个项目的后台应用使用 view 组建库，这里我用的是 elements ui， 向大家介绍组建库的知识，然后接下来会使用一个单独的 view 三的课程，在 view 二的基础上给大家介绍 view 三跟 view 二到底有什么样的区别。在入门这一块，重点介绍 company， 写 api， 这是五又三的一个重大更新，然后再去介绍五又三和五又二的其他方面的差别。那就完了吗？还没结束，我还会带着大家对于一些主建库的源码进行剖析，自己尝试写一个主建库，看会写成什么样子。 那就完了吗？还没有，在第三个阶段，就在比面试环节，我还会针对无忧的各种比面试题，写出一个能够惊艳所有人的答案。常见的无忧面试题就这么一些，随便拿个看一下吧。比方说常见的生命周期，来看一下我写的生命周期，答案是什么样子。来看一下， 我都不用详细给你解释，你看一下，感受一下我这里写的他的步骤，看一下这些步骤跟你平时接触到的一样吗？你面试的时候不要说百分之百了，能够回答出百分之五六十。如果说是大厂的面试官呢？还稳得住？遇到一些中小型企业的面试官，那就被吓死了，他没见过这场面啊，为 为啥我们的学员能有百分之七八十的面试通过率，因为这样的回答吓死人的。他不是说一道面试题是这样子的，所有的都是啊，随便再看一个吧，你要看哪个吧？比方说 def 也是常见的面试题是吧？我跟你讲到啥程度了？语言嘛，拍你脸上了，而且还会给你解释，这个还需要做什么？这个还需要做什么？你看他到底要干什么？ 我给大家讲的面试题绝对不是让你去找一份工作了事，让你找一份工作就了事的话，我不用这么麻烦。我的目标就一个，要惊艳到大厂的面试官， 惊艳到什么程度呢？随便给大家找一个咱们同学的一个聊天截图，这是一位同学给我们的面试反馈，他目前呢，在未来汽车。面试官跟他说，他是唯一一个以大专生的身份去参加面试的，因为看到他的简历呢，还觉得不错，给了他一个机会，然后惊恐的画面就出现了，他的面试回答远远的超过了面 面试官的预期。面试官最后跟他说，虽然是一个大专生，但是他对知识的掌握的程度和深度已经远远超过了很多二幺幺的学生，这不是个例，来看一下这样的例子有多少呢？ 来吧，我们来随便玩一个游戏，随便划拉一下，看一下薪资范围，十几万的薪资在我们这那是白菜价， 二三十万是起点，五十万以上是目标。现在什么字节呀，百度啊，腾讯呀，都快成为杜一的老巢了，到处都是我们的学员。 所以咱们这个行业啊，有一个铁律，你想要多挣钱，你想要往上发展，就一个办法，就是学习，并且只有学习这一条路可走，没有别的办法。这些过来人呢，都是明白的，是吧？学多少你就能挣多少，多学一点呢，你就多值一点。说白了，能学习 这个行业的唯一晋升手段，而反过来，不能学习是这个行业的唯一淘汰原则。所以能跟着我学到这集视频的同学，我发自内心的跟你们讲，你们以后肯定不是一般人，我培养过上万的学员就业，能做到在短视频这种环境下边 还有定义去学习的，在我的学生里边，年薪都在四五十万以上，说实话，连我都很难做到在这种环境下边进行学习，但是你们做到了， 有这个镜头我告诉你，跟着我学，要求职的，我能保证你进大厂，在职提升的，想跳槽的，我能保证你年薪稳稳的过三十， 过三十算个啥呀？所以呢，我也想借这个机会啊，宣传一下我们自己。我由衷的建议啊，一直跟着我们学校的同学，你来了解一下我们的课程，袁老师肯定能够帮到你。整套课程呢，都是我主讲的，主 要帮助的就是在求职和提薪的同学。如果说你正在为这两件事努力，那么你不妨来看看，袁老师带着你系统的学习，至少能省你几年的功夫，而且还能够确保你高薪就职，这点实力袁老师是绝对有的。 咱们的课程呢，也不贵，如果有需要了解的同学呢，可以进咱们评论区第一条，进粉丝群，按照提示来找我们就可以了啊。其实买不买无所谓的，我们不强求，但是你可以先了解了解，职业生涯这么长，以后有需要随时可以来找我们。最后呢，也希望每一位不甘平庸的同学， 在前端这条路上，能够秉承终身学习的习惯，稳扎稳打，厚积而薄发。

其实无忧的核心就两个东西，一个是数据响应式，一个是逐渐化，这两个东西给我们开发带来的变化是非常巨大的，可以说天翻地覆。那么这两个东西当中内容最多，知识最密集的就是逐渐化。 说的再夸张一点，你学无忧的整个过程，百分之九十的时间都在搞定他的主见，那么主见到底是什么？为什么需要他？这是我们首先要搞清楚的一个问题，就是你学一个知识，你首先得清楚这个知识他为什么要出现。 在我们这个行业里边，没有任何一个东西是平白无故出现的，一定是为了解决某一方面的问题。你要理解清楚主见，你首先就要理解清楚没有主见的时候他到底有什么样的问题。我们首先来看，如果说我们没有主见 放在过去开发的时候是怎么开发的呢？当时我们开发前段的时候，是以页面为单位来进行开发的，你要么不写，你要写就得写一个完整的页面，你们过去是不是这样做的？写 atm r， 写 c s s， 写这个页面的 g s， 那么这样一来的话，就会导致我们的开发单元过大。你想啊，现在的前端一个页面是很复杂的，不要说一个页面呢，就把页面中某一个区域拿出来，都是很复杂的，而你以整个页面为单位开发，就会导致你的开发单位太大了，结果呢就是复杂度上升， 太复杂了，一个小的区域我还能 hold 住一整个页面，我 hold 不住了。然后更可怕的是在这个页面当中啊，他有可能会出现一些重复功能的区域，比如说我用一些同样的颜色把它标注出来了，这种区域呢，还不一定是出现在同一个页面里边， 可能不同的页面中都有相同的这样一个区域，他们功能逻辑是相同的，可能细节上呢，有一些小差别，但是大致上是相同的。你以页面为单位开发的时候，就很难去提取这些公共的区域。你们在前面学习的时候都做过传统开发是吧？应该是深有体会。 相同的 at 面怎么办？相同的 cs 怎么办？相同的 gs 怎么来处理都是问题。按照这种模式开发下去呢，我们的代码就极有可能写成这个鬼样子，你看的清楚吗？看不清楚，看不清楚就对了，因为太多了， 整个页面的 atml， 整个页面的四 ss， 整个页面的 gs， 结果这里的截图呢，他代码还其实还没有那么多，加起来还不到一千行，稍微上一点规模的站点，一个页面的代码那是非常之多的。那么出现这些问题怎么解决呢？ 就是要靠主见化。那么首先就要清楚什么是主见，你可以简单的理解为主见啊，他就是界面当中抽离出来的一块区域，比方说我们整个页面，我们可以把它看成是一个完整的主见， root 是不是一块区域？是一块区域吧。然后整个页面里边呢，他包含三个部分，头部、主区域和侧边栏。于是呢，我把这三个区域抽离出来，又形成三个组件， hill， me 和侧边栏和 set。 而主区域里边呢，又有两个区域，两篇文章一二。 于是呢，我们认为这个魅这个组件里边，他又包含了两个直组件，阿迪扣，哎，是不是感觉非常的自然，跟我们平时用 div 去划分页面是不是相当类似？而侧边栏里边又包含了三个区域，这三个区域是相同的哎，我们又把它抽离成组件，哎，头也就组件啊， 抽离出来之后啊，他跟我们的多母元素一样，他也会形成一个塑形结构，我们把它称之为组件数，那么这样子一来的话，我们的代码会形成一个什么样的格式呢？有了组件之后，我们的代码格式就变得非常的清晰了，当然这些代码呢，我后边都会一一讲解啊。现在我们先来感性的认识一下 表，整个页面就是一个跟组件，给他取个名字叫 route， 它里面包含三个区域， hitter， may 和 site， 你看就完事了，跟组件就写完了，这么复杂庞大的一个页面，几行代码就写完， 那么具体到黑的里边有啥呢？有可能有 div， 可能有 a， 可能有菜单，那么都是包含在黑的主建内部的，他只管黑的这一个区域，那么其他是一样的，比方说这个妹，他也是一个主建，而这个主建里边有一个 div， 然后呢，有两个阿铁口，又是主建，对吧？主 组件数吗？啊？题口里边呢，有可能有一些别的什么元素，懂这意思吧？比方说这个二赛的是一个组件，那么这个组件里边又用到了三个组件，这三个组件实际上是同一个组件，艾特它里边有它里边的内容，这样子一来，你看不仅层次结构无比的清晰了，而且重复代码是不是也没了 你两个 rt 口，那么使用同一个组件就可以了，一份代码可以无限次的使用， ita 组件使用一份代码就可以了。当然呢，具体来说啊，这里面的问题还很多啊，需要我们后续的一一学习。不过这个整体的感觉是不是蹭蹭蹭就上来了？所以说组件的意义在哪 四个方面？第一个，降低了开发的力度。我们不再是以整个页面为单位开发了，而是以页面中的某一个小区域，甚至一个图标作为一个区域来进行开发，这样的力度是 是不是变得更加细腻了？由于开发的力度变小了，是不是开发的复杂度就直线下降了，因此主线出现了。第一个最重要的作用就是降低了开发力度， 从而降低了整体的复杂度，就跟我们借式写函数一样，对吧？整个系统复杂了，那处理一些函数出去呗，每个函数解决一个小问题，所有的小问题累加起来就解决了一个大的复杂的问题。 那么第二个意义呢，就在于他减少了重复代码，相同的组件被抽离出去了，你只管重复使用就完事了，这跟函数的道理是一样的，你只需要定义一次，然后就可以重复无限的调用他 好。第三个点呢，是更加有利于团队协助，以前的前端呢，在分配任务的时候，是以页面为单位分配的，就你开发这个页面，我开发这个页面，他们之间要协助 是非常困难的，因为我也不知道我这个页面的东西，你这个页面会不会用到，怎么去抽离重复代码很难的，但是现在不是了，由于现在是以组建为单位进行开发， 来，张三，你给我开发这个组件。张三在开发这个组件的时候，他都不知道这个组件会被用到哪个页面，他只知道这个组件要干嘛。比方说这就是一个登录窗口，他把那个窗口好好做好就完事了。其他任何页面想要使用这个组件的时候，拿过来就用 以组建为单位来进行分配开发，开发的单元更小，开发的周期更短，整个组织管理呢，也变得更加清晰。第四个点呢，就是容易抽离为公共库，我们页面上有很多效果， 什么导航栏啊，轮播图啊，甚至一个小按钮啊，我们完全可以把这一个一个的小区域抽离成一个一个的组件，下一次开发的时候不用再重复开 开发了，直接拿过来就用，而且很多的机构已经这样做了，比方说饿了吧，他就抽离了一个 vivo 的组建库，拿过来就用，我们来体验一下吧。 比方说我们要写一个漂亮的按钮，以前得自己去写什么 atm l， 然后写上 css， 甚至还有可能涉及到 gs， 现在不需要了，已经有现成的组件库了，做好的组件拿过来就用，提交保存，你看这个按钮不就出来了吗？还可以更改它的样式， 你看不就出来了吗？是不是就无比的方便？这些都是组建化开发给我们带来的好处，这些玩意呢，你们以后都会一一学习哈。我们这里呢，对组建就有了一个基本的认识了，虽然很基本，但是 他是组建最核心的概念，我给你传递了这个组建的意识，对后续学习组建开发是极其重要的。好了，有了这些东西打底之后，我们后边就一一来学习如何在代码层面来实现一个组建开发。

接下来讲什么问题呢？什么是主教化开发和模块化开发？他是两个概念，两个概念啊，哎，因为这个咱得分开啊。啊？先说这个主教化开发啊，主教化开发，比如说我现在写一个这个 应用，比如说这个系统里面是一个这个页面，然后呢？他有什么呢？有一个海底有个头部，有他头部，然后他还有一个侧边栏，侧边栏是一个菜单啊，菜单呢？咱就叫啊，一个耐还得有一个主体内容，对吧？这主体内容呢就叫 啃趁他那一个应用系统，基本上好多应用性都是这样的，大家大家可能看你们什么学校的一个选课系统啊，或者说那个办公司的欧威系统啊等等，基本都是这个时候啊，上面那个嗨点里面可能会有一些啊，比如说一个登录啊，一个一个用户的一个头像，然后这里有注销菜单， 个人信息等等等等，然后这个菜单呢显那个什么呃基础数据啊，什么各种业务啊等等等等，然后你点击这些菜单的时候，呃，主要的内容会不断的更新，对吧？基本上系统他都是这个思路，是吧？啊？所以说 咱们就用这个思路来给大家讲一下。呃，什么是组件化开发？组件化开发，大家想一下，我现在这个这个这个程序的话有几个组件啊？按刚才人的思路是不是有三个呀？一个是 happy， 一个是 nice， 一个是啃衬他，对吧？好，那咱现在就创建三个组件。那我组件写在哪啊？ vivo 的 v you 的程序，大家记得组件我写到康普嫩词，康普嫩词就是组件的意思， 咱写的程序呢，都放到这个康普顿词里啊，那我现在去建三个组件，第一个组件呢就叫嗨点点 beaut， 但是这里有一个问题，就是说组件的名不要和标签的名一样，一样的 话就会包错，所以说这个东西我就不能叫海胆点比我了啊，咱可以换一个，比如说咱叫麦嗨点点比我，对吧？我加我所有的主页，加一个麦，加一个麦就好了。麦嗨点，那他麦嗨点有什么呢？咱就简单写，就写一个这个 logo， 有个 logo， 然后 下面还有一个这个 a 圈啊，用户信息啊，海底里面就就这两个，写一个 spa 吧，写两个 spa 吧， spa 省的换行的吧。啊？ logo 和这个 spa 用户信息 好，然后嗨的有了之后，我再建一个组件。刚才咱们说这个图啊，咱是不是要建三个组件，还有一对耐磨和 ctrl， 对吧？那创建耐，那这个是菜单的话呢，咱参不累他，咱就写一个有点菜单样，是吧？啊？比如说咱，咱比较喜欢起一个 水果立表这个菜单，那就香蕉、苹果、鸭梨。如果说大家真正做系统的时候，这个菜单可能是一些什么跳转的一些页面啊，比如说技术数据啊，或者说权限管理啊，用户管理啊，这这类的啊。然后还有一个内容，内容就是 maccnt 点 biu， 那这里写一个 h 一，就写一个 helloword， 再写一个别的也行， 写一下吧，这个是应用的。呃，主体部分好，那组件都写完了啊，其实大家以后开发组件化开发也是啊，就是你把这个结构想好了之后，然后你会新建一堆组件啊，然后每个组件的功能都写完，然后把这个组件啪一拼，拼接成一个系统就 ok 了。 好，那然后咱接着写啊，那刚才咱是不是根组件是这个 vivo 啊？那我是不是说直组件都要放到根组件里啊？那这个写的话，咱就写一个，用这个根组件 去搭一个框架。搭个什么框架呢？就是咱刚才写这个嗨的左侧菜单， nice， 中间啃衬他搭一个这个框架，那咱就写一个 div， 那这个呢？克拉斯等于 开点，第二个呢？咱就叫 canting， 这个是一个容器啊，就是说 catty 是什么呢？是这个第二层这个容器，这叫 ctrlant， 这里面有两个， 一个叫内务，还有一个呢，叫啃蹭蹭。好，那这个结构有了，结构有了，然后咱们现在把这个整体的页面功能给他实现了啊，分区给他分。好，那咱就需要在样式里写了，对吧？样式里的话，那就是点嗨歌，咱们给他加一个高度啊，比如说这个高度是八十 像素，然后给个边框啊， epx， sorry 的 red， 随便给个颜色啊。好，他洗完之后，咱看一下现在的 程序啊，来看是不是有一个红色的边框呢？看到了吧，但是这红色边框他他他是一个，上面一个距离，对吧？这个距离是默认的一个刚才的样式啊，在这啊，音带个字 css 啊，这是创建项目，头是自带的，咱把它干掉，不要他了，保存啊，干掉之后，然后看一下现在的英雄程序，哎，回来了，到顶了，这是头部，对吧？头部有了之后，那左侧菜单呢？第二层呢？是点天津，点天津点我设一个 flax 布局， supreme， flax 让他横向排列嘛，咱就不用浮动了，对吧？然后这个 ctrl 那里面呢？看他这 ctrl 那里面，左面有个奈务，右面有个跟衬他， 咱就写写一下他俩的样式啊，那就是点看清点，然后点左边的 nice， 他是 flax， 咱给个一，然后包对 epx 手里的给一个蓝色啊，然后下面这个长青柠里面的这个跟衬的内容，咱给他 flax， 给一个五啊，让他宽一点，然后这个包点一 px sorry 的给一个呃， carry 吧。绿色咱给这个 nice， 给一个八百像素。但如果真做系统的时候，你这个高度你得适应屏幕啊，或者是按照甲方的要求来做啊，咱不能随便给这个尺寸，对吧？那好，那看一下结构 是有了，对吧？上面红色的嗨点左侧的奈姆，右侧的一个呃，这个，这个啃衬他，对吧？然后咱说主间化开发是不是就把主间拼到一起啊？啊？好，那咱现在就需要把主间都引到根主间里面把直主间都引到根主间里面，那我们这里就需要 新铺的先引这个 mary happy tom 哪呢？这个斜杠蹭蹭康城康普能吃 啊？斜杠他这里有一个麦嗨点，这咱刚才创建的，对吧？点不有，我粘贴一下。然后第二个呢？叫什么？第二叫麦耐，第三个呢？叫麦 肯称啊。需要先注册主件，对吧？注册主件，那我已经注册一个 hellowor 的，但是这个 helloword 咱不注册也行，对吧？咱也用不上他了啊。然后咱需要注册这个买嗨的，然后，然后注册这个 man， 然后注册这个 maccnt， 然后我现在需要把这三个组件把它放到上面的这个内容里面，对吧？啊？那咱刚说嗨点嗨点里面我放的就是嗨点这个组件 内容了，然后下面呢是这个是 nice， 对吧？菜单对吧？水果鸭梨水果列表对吧？啊？那 man， 然后下面的这个是 ctrl， 那就是 m a ctrl， 这个是 m， 对吧？哈哈，好，那咱给他改过来啊。呃，引入的这个康不能是，这个是写成 n 了， mm 好保存，然后再看一下效果刷新 好了，那这样的话，咱就三个组件就把它拼到这个应用里了，对吧？那首先是 logo 信息，用户信息在海底里，然后左边是一个菜单，右边一个主题内容， 那这个其实就是组件化的开发，组件化的开发呢，咱就可以通过这种创建组件的方式，咱建三个组件，对吧？然后把这些组件呢，最后拼到一起，拼成一个应用啊，这就是组件化开发的一个基本概念。当然如果说咱真正开营 开发应用的时候，会有一些问题，比如说某些组件呢，会有一些船只啊，会设置陆游啊等等等等这些获取数据啊，这些东西。但是好处是什么呢？就是如果出现问题了，比如说现在，你说说，哎，中间内容 helloword 出现问题了，那咱们直接就定位啊，我直接改这个麦啃衬他就可以了。 这这就两行代码啊，比如 hellowor 的，我给他改了，改成 hello vivo 了，就这两行代码保存，然后整个系统再看，哎， hello vivo 就变了，这样的话咱就成功的把功能给他拆分开了 啊，那哪些组件有问题就改哪，而不是说像以前的话，咱可能套模板呢，写了一堆贴毛啊，这个页面写了三百行一贴毛，或者说两千行一贴毛，然后还有一堆 gs， 需要去一个一个找问题，那个太难受了。但如果说组件化的开发的话，你可以把整个应用拆分成很小的组件，那 出问题就写哪，哪出问题就改哪，这样的话就开发效率就高了，这就是组件化开发的概概念，刚才咱讲的呢？是组件化开发，那什么是 模块化开发了？刚才咱是不是说两个问题啊，对吧？一个是组件化开发，一个是模块化开发啊。什么是模块化开发呢？模块化要咱举个简单的例子啊，就比如说如果我想实现一个功能啊，这个功能 他可能不需要去创建主页，比如说我现在这个功能是啥呢？我就想计算两个数的加和，那这个不需要页面，对吧？他是一个功能，那这个功能的话我怎么写啊？我可以在这，比如 s 二 c， 咱所有的声音都写到 s 二 c 里。 sst 里面，我新建一个梦露啊，这个随便起名啊，随便随便起名，比如说我就叫 utuse， 就一个工具，一个工具的一个梦露，那这里呢？我就 可以创建很多个。呃，工具工具的话，我们可以创建成一个 gs 文件，比如说叫 sum 点 js， 然后这个 sum 的 gs 是一个函数，翻个身，然后 sum 函数 等于什么呢？等于这个里衬十加上十加上二十啊，然后我现在写的是一个功能模块，对吧？叫 sum bs 啊，我需要把这个功能模块给他暴露出去。 暴露属于怎么暴露呢？呃， e s 六的模块化语法啊，就是 expoxd fox 啊，暴露这个 sum。 那这样的话，我在 康不能自理的啃蹭的啃蹭的，大家看啊，这是不是？呃，这是一个组件，对吧？主体部分啊，在这了，主体这部分啊，这个组件我希望在这啊。 h 一输出一个结果。 输出一个什么结果呢？输出刚才咱们模块计算的结果。好，那这个咱就写了 surprax boxd box， 那咱就需要自己写一个模块啊，那咱咱自己写这个模块的话，咱先咱咱现在自己写这个模块，我现在需要，需要实现什么功能呢？需要让这个 h 一里面显示啊， 显示刚才咱们模块计算出来这个结果，结果就三十，对吧？显示这个三十啊，那这个怎么写啊？我需要引入那个模块音 pose， 引入这个 sum flom 从哪引入呢？从这个 utus 啊，然后它里面有一个 sum 点 ts。 好，那拿到这个模块之后啊，然后呢？我现在写一个计算属性， ctrl d 的，那计算属性我可以写一个单本，直接在这就可以绑单本了，对吧？但是计算属性他是一个函数，是吧？我需要通 我计算得到这个值啊，那这个值怎么得到呢？ reaty 谁呢？ retexum 雕用括号。那我其实就是调用了这个模块，得到了这个模块计算的结果，然后把它放到单模上，然后我们看一下效果来，三十出来了，这个就是模块化化的一些方式啊， 就是说我可以单独定一个功能模块，这个功能模块可能是，呃，一步请求数据啊，可能是完成某些功能啊，可能是做了某些事啊，咱不管这个事是什么，咱只要知道这个模块做了一些事， 他跟这个呃页面可能是没关系的，他就是做了一件事，然后我们的组件呢，就可以去调用这个模块，然后引入这个模块去做一些事啊，去完成这个工作，这就是模块化开发的概念。而且模块化的话他会用到这个 enpout 和 expot， 这是 es 二零一五提供的 模块化的语法啊，所以说我们通过这种模块化的方式就可以把程序拆分成不同的。呃，功能啊，有的时候大家为什么混呢？就是说， 哎，你这个主件化开发也是拆分，模块化开发也是拆分，那他有什么区别呢？啊？这个简单介绍一下，就是说主间化，他其实说的拆分还是页面层面的拆分啊？就比如说这整体的页面我拆成了三个主件啊，那组件化开发其实就是拆页面，那模块化开发呢？是拆功能啊， 拆功能我可能一个主件我可能有多个模块，而一个模块呢，我也可能用到了多个主件之上，所以说这是他们之间的关系，这就是主件化开发和模块化开发，模块化开发的一个基本概念了。

好，我们来呃学习一下插槽的第四个知识点，就是这个参数的一个传递啊，呃，插槽的这个参数传递，呃，这种情况是什么情况？比如说啊，我们像这个插件我们封装好之后啊，这个这个组件封装好之后啊，呃，我们这个插槽进来，插进来之后 啊，你比如说剪辑发送啊，或者是我做其他处理啊，我们这边是我们我们这个组件里面肯定有一些变量，我们需要需要通过呃这个插槽的方式啊，把这个变量里面内容返回给这个副组件啊，就是我们这个这个组件啊，啊，这怎么进行交互啊？就是我们可以看出啊， 在这个插槽里面我们可以看一下他这边啊，除了这个类目属性以外，这里面其实还有可以创建一个对的属性，是吧？或者创建其他的属性，也就是说我们这个插槽啊，创建完之后，你可以在插槽里面是可以加加些属性的，我们看一下分离原码啊，看出啊，我们这有个类目属性，还有个对的属性啊，对的， 首先的话就相当于这里面就放数据了。好，放完数据之后我们这个副主任到底怎么去用它啊？好，用它的话其实也非常简单，我们看一下啊，在这里我们继续看一下啊，它这个这个案例其实也写的很清楚啊，就是，呃，好，我们抄进来啊，我们我们看一下这个原版啊，看这个案例 啊，这个案例的话其实也非常简单，就是我们查查完之后这一块是接的是名字，然后这一块其实就是我们的这个数据了啊，就是你你的这个，呃组件里面查查你的数据，全部都从这里进行接收啊，接收之后我们就可以把这个绑定打印出来，可以看出这个内容啊，所以这块就是就还是比较简单，我们继续看一下啊， 我们就只学在这里啊，看到我们的天文里面啊，这边有一个什么啊？这个是名字，查到名字啊，这个是查到内容啊，怎么去接受他？但是我们没有写啊，是吧？我们就可以在这里随便起个名字啊，就是啊，这个是我这个发送之后啊，要给我的数据啊，生的 det， 好吧，我就叫他 生的 data 啊，发送过来数据就生的 data， 然后我们在这里啊，我们就给他这个商业绑定一下啊，就是 啊，我这边已经写了刚才这个手，那绑定完之后啊，这样的话我们就看出这一个啊，插槽啊，这个组件，这组件给我的数据是怎么样的啊？就是他给了我一个 k， 他给了我一个 id， 然后就给了我一个 bat 啊，这个里面就是我们这个数据了啊，看看，这就是他们这个江户啊，这样的话，我比如说我想把这个啊， 你传给我的这个数据给他展示出来啊，显示显示，显示在这里啊，是吧？发送消息，是吧？这是你展示给我的数据啊，可以看出啊，这个就是我是数据，是吧？展示出来了，然后我们这个指数键啊选择参数，如果是动态的，你就可以在这里去绑绑一个变量啊，是吧？ 啊？这个数据也可以改啊，比如说，呃，发送 low， 好吧？发送了，是吧？ 这个自主卷，这就是这个参数的传递啊，这个自主卷啊，呃，电用副主卷啊，把将这个插槽的这个数据传入给副主卷啊，就这么一个知识点， okay。

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

写 real 代码的比写 real 代码的前端技术更足，待遇更高。 real 是面， real 是面条，面我可以做成面包，可以做成馒头，可以做成面条。你是否听过这样的言论，总体概括一句话就是 react 要比 vivo 好，真的是这样吗？从代码的角度给大家解析一下。先看 vi 的代码，在这个地方我定了一个方法，这个方法是随机生成 rgb 的颜色，然后给这个 div 设置随机生成的背景色。 这个组件我又引了下面这个组件，这个组件也很简单，分了两个 d i v， 第一个和第二个。然后在这个 d i v 里面，我又引入了一个直组件，这个直组件也是随机设成一个背景色，这两个平行的 d i v 都加了，可立刻点击 事件，运行起来就是这样的效果。我点击这两个 div 的时候，那么他的抗冷值是变化了，抗冷值变化，他要重新渲染了，重新渲染就会调用这个方法，从而导致背景颜色跟着变化。我点击的时候，你会发现 只是这两个平行的 div 的颜色变化了，这个紫主键没有任何变化，就是这个 children， 那就说明了这个紫主键其实是没有渲染的， 这个直组件我们也没有做特殊的处理。再看 rea 的代码， rea 代码也是同样的，他定了一个 div， 随机生成背景式，又引入了这个组件，这个组件也是两个平行的 div， 每一个 div 我都加了点击的四键，都引入了这个直组键。直组键和 viv 的代码是一样的，它运行起来也是这样的效果。你可以观察一下我点击这个副组键， div 一的时候， 副主见 div 二他会重新渲染，这个资主间也会重新渲染，有没有发现？那么这就是很明显的一个区别， real 和 vio， 你在写 vio 代码的时候， 像这种情况，你不太需要去考虑性能相关的问题，但是你写 rei 代码就不一样。按照咱们正常的理解，这个直组件没有任何的动态数据，就不应该去渲染，但是你不做任何处理，他是渲染的，如果不让他渲染的话，那么我必须在外面包一层 mob， 为自己要做特殊的处理，把它改成组件二，点击这时候词组件是没有任何变化的。这就说明了我们在写 read 代码的时候，我们要考虑的东西特别多，代码有没有性能问题，那写没有代码不需要往这方面思考，写你的业务逻辑就 就好了。因为 rap 架构的机制就决定了，每当我状态发生变化的时候，他其实是从当前组件一直更新到叶子组件的。 vivo 就不一样， vivo 他是每一个组件，他作为一个独立的一个个体， 这个组件的依赖，如果没有变化，那么他不会重新选人。所以说你们认为是 real 好呢？还是 real 的好呢？大家可以评论区留言一块探讨。如果想要代码 demo 的也可以评论区留言。