053_尚硅谷Vue技术_对组件的理解

好了各位，从这一小节开始呢，咱们就正式的去学习组件化编程了，也就是课件里边的这个第二章是这样啊各位我不想一上来吧，就跟你说，哎，这个组件怎么定义啊，怎么注册，它怎么使用，我知道这些东西很重要，确实得学，你不学这你学啥呢呀啊，但是真正学之前，希望大家呢，花几分钟把两个问题搞懂了，第一个问题就是到底什么是组见哎，天天跟人家说我学了框架了，我是在组建化编程，人家问你一个问题，啥是组建呀，你回答不上来了，这不行。那么第二个问题就是组件化编程和我之前用的那种传统方式去编程相比，它有什么优势？说的再直白点，你哪儿好啊，我用你啊是吧？哎，那这两个问题啊，各位其实都可以在官网的一个地方啊，找到答案在哪儿呢？在这儿啊，你不用去点这里边的东西一上。

来，这有一个大按钮叫y view GS，意思就是为什么要用view打开之后呢？是一个视频啊，首先我声明啊，我不会在我的课堂上去放这个视频，为什么呢？因为这个视频里边各位将近有4/5的篇幅都在给你写一些view里面最最基础的代码，你比如说进度条，从这开始，再往后各位就全都是基础代码了，而且我赶保这些基础代码我们都学过了，就让你写这些东西都是分分钟就能实现的，你看这不是在创建view u实例吗？比如说你划到最后，你看他写了一个什么东西呢？写了这么一个来暂停，你看这同学，这是渲染列表吧，这是那个条件渲染吧，这是差之语法吧，这是绑定点击事件吧，逻辑简单逻辑直接写在这儿了吧，诶，这些东西现在对于我们来说，那都是非常简单的，所以说整个这个视频的这部分区域呢，同学我也不建议你自己下去再看了，应该是这儿，哎，从这儿一直到哪了，一直到最后就不太推荐你看了，最后呢，所。

虽然有一个人他露脸了，就是那个view的作者是吧？有雨西他露个脸，但是也没说太多的东西，所以说建议你从进度条的这个位置往前开始看，OK，那前边他说什么了呢？各位，我给你切到这儿啊，切到17秒的这个位置大概在这儿啊，调一下在这儿，他说不好哪不好啊，就是这儿，你看写了一个这个哭丧的脸是吧？他说一堆GS啊，Atml CSS，互相乱七八糟的来回引呢，不太好是吧？哎，你再往前调一点呢，他说缺乏一个什么组织形式，你看这缺乏正规的组织形式。啊，然后呢，他接着说就说view啊，把这问题解决了，你再往后走走，哎，他开始给你提出组件这个概念，而且你看这他说什么，每个组件都怎么怎么地，直接就把组件的概念啊就抛给你了，所以说同学你看他这视频的前一分多钟啊，如果说理解能力好的同学其实也就差不多了，是吧？哎，但是我们为了能把问题说明白，为了让每个同学都能理解的很透彻，所以说我在官网的这个视频的基础上啊，我也是受到人家的这个东西的启发，然后呢，我做了一个简单的一个小PPT啊，咱们看一下各位走，首先呢，咱们之前是这么编写应用的，就是传统方式怎么写呢？看着说有一个需求让你做这么一个页面。

有顶部，有底部，有左边导航，有右边内容，非常标准的一个管理系统的一个布局哈，那你说我们得怎么写，首先第一步各位你是不是得写一个atml，因为整个它是一个页面嘛，你得写一个atml文件，随后呢，哎，说老师简单再整个CSS，再整个JS，那不就写完了吗？同学咱这么说说，如果你想把东西往好了写明白不？同学咱这么说吧，如果说这东西啊，你就奔着把功能做出来，不考虑后果，其实一个atl就够了，里边我用style标签去写样式啊，里边我用那个script的标签去写脚本，是不是也行，咱不是说想把东西写好吗？是吧，同学我不想用这种方式去讲，就是为了说组件化好，然后就刻意呢套路，你就把这个传统方式啊，故意往了那个不好的方式去写，不会那样的啊，咱正常说正常写同学顶部底部导航内容，如果你真想实现以后这个代码好维护，别人还想用你这个东西最好，各位你是不是把这四个地方变成四个。

CSS对吧？结构那肯定是一个atml了，诶是不是四个CSS，每个人呢，都负责不同的一个地方，随后怎么办呀？一引入是不是就得了？哎，就截止到目前没啥问题对吧？之前不就这么写代码的吗？啊你再往下再想，同学顶部底部导航内容里边都得有交互吧，咱就这么说，里边一般是不是都得有点按钮图片啥的对吧？鼠标一点击啊，一按下键盘，鼠标一划过是不是都得有交互啊，那同学你想把东西写的更好一点，那是不是顶部底部导航内容四块分别对应是不是四个GS，当然你说你捏成一个那也行啊对吧，然后呢，一引入同学就截止到目前啊，我真的是中规中矩的说不吹不黑的，说一点儿问题都没有，没啥问题，之前同学日子不就是这么过的吗？是吧？哎，好了，再往下看同学，现在啊，又来需求了。

说让你再写一个页面，这个页面里边也有顶部也有底部，并且结构样式交互和上边的顶部底部那都是一样的，那你说接下来你咋办？同学，不说别的，是不是又出现一个页面，那我就只能在这个位置是不是再写一个HTML文档啊，对吧，什么样式什么这个交互啥的再说呗，首先结构得出来呀，又写了一个TML，但是我想问你的是各位啊，在这个attml里面，你是不是写过顶部，你是不是也写过底部，那也就意味着你不用再写一遍了，你复制粘贴一份，你这再复制粘贴一份，把头部在这儿写一遍是不？哎，然后把底部的那个结构在这儿是不是再写一遍？哎，同学你看结构之前写过吗？复制粘过来不就可以了吗？啊，那接下来呢。你只是把结构带过来了，对吗？各位，这个东西是不是还得有样式和交互呢呀，咱就假设各位这个CSS是管头部样式的，这CSS咱就假设是管底部样式的，你说接下来咋办？新的文档出来了，Al文档那是不是得来吧，走是不是引入这个CSS，哎，我这里边哎就也有顶部的那个样式了，那还得引入啥是不是这个，那这控制谁控制底部的呗，OK，那截止到目前结构对了，样式对了，还差啥呀，交互那交互同学咱就比如说啊，这个GS就是控制顶部的交互的，那么这个GS就是控制底部的这个，那你知道接下来应该咋做？同学，引不引入这个引入，引不引入这个引入对不？哎，截止到目前也没发现有什么明显的问题，同学再考虑中间是不是有商品列表，商品列表我跟你讲，可是没有人写过的呀，这得你自己写了，所以说你就默默的在哪，在这中间是不是写一个商品列表区啊，随后同学商品列表。

有没有样式，有那咋办？再来个CSS再引入啊，那商品列表同学有没有那个交互也得有，是不是写个JS引不引入引入，哎同学之前传统的方式我们就是这么写代码了，对不对？你能说它有什么严重的问题吗？同学也没有什么太严重的问题，对吧？但是你要非得和组件化对比，我告诉你它就有两个地方就不太完美啊来同学存在的问题是吧？都是小问题，来什么问题呢？首先第一个依赖关系混乱，不好维护，啥意思呢？同学举个例子，咱就说这个CSS突然被拎出来了，那我想问你，它是控制哪块样式的呢？你是不是得分析啊，这里面我们有一个解决办法，就是给它按照名字进行划分，你比如说我写一个福特点CSS，同学你说就从这名上来说，我们大概应该能猜出来它是控制哪一部分样式的，肯定是底部对吧？你看我这名都叫福特了呀啊。

还有一个问题就是当你去修改这个CSS的时候，你可一定要想好，你一改这个文件不要紧，但凡用到这个样式的结构就全都发生变化，对不对？哎，说老师，那我怎么能琢磨一下，他到底是负责哪一个页面的样式的呢？那你就得去分析分析了，说白了同学啊，都哪个HTML里边引入这个CSS了，你得挨个去看对不啊，还有一个地方啊，同学也能就是体现出来他这个关系混乱在哪呢？比如说这个JS，同学咱就拿它举例子啊，比如说呀，他是一个第三方的JS，叫做j.JS然后呢，老王啊，想写一个功能啊，然后他用到了这块里的API，比如说老王写的a.JS同学，那我问你是不是必须保证先引入他，随后再引入它，你要先引入老王的JS，那一直行肯定得报错对不好，你再分析同学，比如说呢，还有一个老王的同事写了一个c.JS是吧，这C里。

里边啊，同学他想用到老王这里边的一个方法，那就得保证老王的东西先引入，然后再引入他，对不对？同学，两个三个四个五个还好，这个东西一旦要是达到了十个以上，而且呢，还得临时调整一下，哪个功能不用了，哪个功能还得是依赖于另外一个人，你这个依赖关系就非常不好维护了，对不对？但是呢，同学话说回来，原来就这么写，咱这日子也过下去了，对不对？哎，而且呢，同学我们还发明了一个技术，专门解决GS依赖关系混乱，专门解决GS引入这个变量或者是函数的时候命名冲突，那技术叫什么来着，我们学过同学在你学view这个课之前，你应该听过叫做GS的模块化，对不对？但是同学模块化只关注解决谁，只关注解决GS的问题对不对，哎，所以说同学咱就这说吧，啊，传统方式编写应用，稍微有点关系混乱，稍微有点不好维护，对吧，别把它说的一无是处也没什么大。

问题来再说第二个同学，代码复用率不高，这个东西从哪体现呢？各位，目前我的这个图里，我告诉大家CSS你仔细用心去体会，各位，我告诉你我用了。GS，我也告诉你各位，我复用了，你琢磨一下，同学这个CSS里面咱就这么说，比如说我写了十行代码，十行样式，然后我问你啊，你这会儿是不是引入这个CSS了，你这是不是也引入了？同学简单来说十行代码两个HTML文档是不是都在用啊，而我只写了几遍呢？一遍谁用谁引入呗。同学是不是复用，必须是，那我再问你，咱拿它举例子，这个JS文件，我问你这里边，比如说我写了50行GS的脚本，那我问你有几个引入一个两个，同学还是那套路，我只写50行，我不会再写一遍，谁用谁引入是不是就得了。所以说同学这里边CSS和JS是完成了什么呀，复用的，但是同学哪没复用呢？我告诉你这没复用。

你记不记得之前我是这么说的，我说哎呀，这个里边写了一个头部，哎呀，这里边写了一个底部，那就这样吧，既然我这边也要用啊，我就诶通过这种方式，我复制粘贴往这一写，同学你听我说复制和复用是有本质区别的，复制啥意思？有一个这东西了，我再复制一份给那个人用，这不叫复用对不对？复用是啥意思，我只有一个东西，你也能用，我也能用，大家用的是一个，这叫复用对不？哎，所以说同学你这两个黄色箭头指的是啥呀，CTRLCCTRLV呀，对不？所以说同学你觉不觉得这个呃结构其实我是没有复用的，那有些同学啊，可能就有想法，老师怎能不能这样呢？诶，我把这个能复用的这段结构啊，给它弄出去，形成一个点atml，然后呢，我通过GS的脚本拿到这个东西，然后再往里边放，哎，能不能行呢？可以，也就是说同学最笨的办法，你可以这样做，你在外边啊，定义一个str，一个字符串，你把。

我有头部，哎相关的那个结构呢，都给它存成一个HTML字符串，然后你通过GS的脚本，哎，然后把它那个什么inner HTML，然后把东西往里放，就纯自己写，能不能写，能写就硬写，也能写下去，就说白了吧，同学，这个结构我要硬想复用，能不能复用也能，就是异常的恶心和麻烦，对不？各位哎，所以说同学我们有一个更好的方式，就是用组件去写，用组件去写呢，你就不会出现关系混乱，你也不会出现说这个结构没有办法复用，或者说结构复用很恶心这么一个情况，那来我们看看组件，那它得怎么写，还是同样的功能啊各位顶部底部导航和内容，然后组件呀，它就这么玩了，你瞧着，首先呢，一上来它得分析页面里边有几大块儿，哎，或者说有几大功能，一看是四块对不好了，各位咱就拿顶部这块儿说事儿啊，咱就拿这块说事儿，你瞧着走，哎，他说你这个顶部啊，是有自己的一块结构的啊，也有自己的样。

方式也有自己的交互，那我就这样吧，我弄出来一个hier组件，为什么叫hier组件？这个名字必须得是英文的，对吧？同学，谁家编码定义一个变量用中文的，这不说了啊，Hier组件hier的意思就是它是顶部的，或者说是头部的，就叫做hier，你说老师我就不想叫hier，我叫top顶部的行不行？可以啊，是吧，老师我叫banner对吧，行不行啊，也可以啊，对吧，在这呢，我就用hier，那这个组件里面包含着什么呢？你瞧着这可有意思了，走。这个组件里面包含着的是实现顶部这一小块功能所对应的样式结构以及交互。这个结构呢，你要注意，它只是写了一个片段，真正实现了它这边的结构就只写到这个里面，至于说什么里边的body标签啊，Atml标签啊那些东西，还有什么atml文档的第一行，那个do type文档声明，都不需要在这写明白不，同学为什么叫片段？我只关注顶部这一块的结构，别的任何结构我都不关注。那你想想同学有没有一种感觉，所谓的组件好像是个大鞋盒子，鞋盒子里边装的是什么呢？顶部这块功能对应的样式结构、交互是这意思不？哎，那同学以此类推，你说导航区、内容区、底部区是不是都可以用组件去写呀？而且你看名字，内容区我叫content，有内容的意思，哎，导航呢，我叫navigator啊对吧，底部呢我叫。

福特，明白了不？哎，是这样的说老师，那这有啥优势呢？首先说说最直观的一个小优势啊，同学，就是这个CSS啊，我以后改的时候我就特别明确，你绝对不控制别人，控制的就是顶部的，而且你觉不觉得把所有实现顶部功能相关的东西啊，都给它封在一个大盒子里，这样的话便于维护是不？各位诶，这只是一个小优势，如果你想看到组建更大的威力，那我告诉你就是从复用开始的来，功能又出现了，还有顶部，还有底部，中间有商品列表区，我问你各位啊，就顶部这一小条的结构样式、交互，我是不是都写过一遍啊？那叫什么组件呢？Hazer组件，那接下来啊，它就这样做了，同学把之前写的hazer组件注意注意了啊，不是复制粘贴一份，而是把之前我所写的这个组件进行一个动作叫引入，哎，引入你只。

需要写一套hier组件相关的东西，如果别人也想用各位，那他就只需要一句代码引入即可，哎，所以说你看我这动画啊，各位走从上边落下来的，那同理各位底部这块来从上方掉下来是不复用，但是同学商品列表里边这东西好像之前没写过，那怎么办呢？哎，那就来吧，你得弄出来一个商品列表组件，叫做list，而且你看同学我这个list组件跟别的组件啊还不一样，除了有这个功能的一些基本效果，你比如说呃，样式啊，呃，比如说这个结构啊和交互啊，还有一些高级的东西，你比如说例子里边为了呈现一些商品，我用到了特殊的字体啊，为了实现一个商品的介绍呢，我来了一个这个呃视频对吧？哎，为了实现商品的效果呢，展示，哎，我还弄了一个音频，当然这里边还有很多东西，哎，你比如说你个商品对应的一个什么下载的安装包啊等等很多的东西，同学觉不觉得都。

能往这个大鞋盒子里面放，所以说这回同学你再体会体会这个组建这个思想是不是挺好的，哎，其实同学他体现了一个词儿叫封装。哎，反正就是说你你想不想要顶部那一块的功能，我想要结构样式交互，我啥都想要，我就想我这个顶部和你那一模一样，他说来吧，我把这鞋盒子对吧，诶给你你就也可以了，OK，诶这就是组件啊，那说到这儿呢，也不知道大家呢，自己有没有对组件呢下一个定义，那这样我们看一幅图，然后就给组建下定义，就是这幅图，这幅图呢是摘自view的官网，这幅图想表达的东西有两个，先说第一个，他想表达的是所有的这些组件。

必须得听一个大哥的指挥，大哥是VM，哎，体会体会啊，你是一个组件，我是一个组件，咱们都是一部分一部分一个小功能，那这些功能都应该往哪儿摆对吧？诶谁先谁后，那都得听这个大哥的指挥好这个图呢，还能体现出第二个东西，各位看一下左边的结构，看一下右边的树形结构，它不是随便画的，我给你编个号啊，这是一，这是二，这是三，注意是红色的123，为什么一下边没东西，二就有两个，三就有三个呢？是这样的同学，那123呢？这三个红色的组件依次代表谁呢？左边结构里的浅灰色。

哎，这个也是浅灰色，这个呢也是浅灰色，说的再直白点，它就是那一，它就是那二，它就是那三，为什么说一下边没有，因为你看一这个浅灰色的盒子里面是不是在没有更加深一层次灰色的东西了呀，说白了一呀，没有下属了，那二为什么有两个呢？其实指的就是这个蓝色的位置，这个蓝色的一，这个蓝色的二，那其实这个就是指一，那这个其实就是指二，那同理你也知道了，为什么这有三个粉色的这个是吧？123其实指的就是三里边还有这个123，哎，他这回想表达的就是组件可以产生嵌套。哎，我本身是一个组件，那我里边呢，有一些功能啊，哎，也可以再给它变成一个组件，OK，好了，这块你要理解，那同学我们说了这么多，你能不能到现在给组件下个定义呢？来说一个最标准的定义，各位就是组件其实就是实现应用中局部功能代码和资源的集合，说说啊，最终落到哪儿了。

的集合，说的再直白点，组件就是什么什么什么什么什么的集合，对吧？哎，所以说组件是一个集合，集合里面包含的什么呢？哎，代码，那代码指的是什么呀？对于前端来说，同学前端的组件代码其实就是CSS，还有什么呢？诶家淼还有什么呢？JS，你看组成一个界面的三个重要元素嘛，那这资源指的是什么呀？就是刚才我所说的，你里边可能有一些MP3音频，MP4视频，以及一些tdf字体，或者什么点ZP这些压缩包之类的，对不对？各位，OK，这叫资源，而且你看前边啊，它加了一个限定的词儿，各位叫局部功能，为啥叫局部功能啊？那同学你想想啊，如果说啊，你没有这些东西，这些都没有对吧？哎，好，然后呢，你这么跟人家聊的，你说呀，我这整个应用啊，这一大堆东西啊，它就是一个组件，同学，那我问一下你这个组件还有什么意义吗？就突然有一天啊，你同事老王跟你说说哎，小张，你把你这个给我对吧，我那跟你那结构是一样的，你说不好意思，我那整个红色的是一个大组件，要不你把这拿去吧，同学，组件如果说你没有拆的那么细致，会导致一个问题，就是复用性啊，就不存在了，你这个复用就没有体现出来，你说是不？各位哎，所以说我们一直在强调什么呢？局部，哎局部功能就一小块，对不？OK，同学你看这不就把组件的定义就给它说明白了吗？那我们回头来看什么是组件呢？不再说了，定义在这儿呢，对吧，那组件化编程也就是用这种方式，哎，和我之前用哪种方式呢？用这种方式相比对吧，有什么优势呢？哎，文件好维护。

对吧？依赖关系不混乱，而且最主要的是复用率高，有没有一种感觉，同学，无论是样式结构还是交互，我通通是不是都能复用啊？哎，东西只写一套，如果十个人用，那十个人就都做引入这个动作是不就可以了呀？好了，各位回到这个课件里面，我们再过一些概念啊同学，这个模块刚才我提过了是不是？哎，这个模块化这儿呢，我就不多磨迹了。同学，模块化很简单，就是一个庞大的GS，这个GS太大了，你可以把它拆成很多份，对不对？哎，你拆的时候不能随便拆，对吧？你得怎么暴露啊，你得怎么引入啊，这都是模块里边咱们讲的对不对？理解就是一个模块，其实就是指一个GS文件前端的世界里面模块指的就是GS的模块，对吧？啊，CSS是不需要有模块，Atml也是不需要的，对不对？哎，那为什么要用这个模块的，因为GS文件呀，很多很复杂，对不对？哎，那作用就是能够复用JS，简化J。

S编写这儿呢，就不墨迹了，咱之前说过这个组件呢，是今天新学的对不对？哎，用来实现局部或者是特定功能啊，效果和代码的什么集合是吧？哎，在这儿为什么要用啊，因为一个界面的功能可能会很复杂，会有很多的组成部分，对吧？我这么做也只有一个目的，就是复用编码，简化编码，提高运行效率是不？哎，然后再说两个形容词，叫模块化，还有组件化，哎这怎么理解呢？同学，其实啊，这就是叫个字眼的问题，就是如果你在写这个应用的时候，哎，你那GS吧，你嫌它大，你用那个GS的模块化方式啊，给它拆成了a.GS给它拆成了b.GS对吧，B点这个GS给它拆成了c.GS那同学，OK。

你是不是把一个庞大的JS给拆了呀，OK，以后你在描述你项目的时候就可以加个形容词了，哎，叫模块化的应用，哎，人家问你为什么你这个应用是模块化的呀，因为你说我把里边这个GS拆了是吧，并且按照模块化的标准去拆的，那我就叫模块化的应用，那同理同学这个也是，那你说什么叫组件化的应用啊。

那就是说我的这个应用里边按照功能点进行了拆分，不同的功能点就是一个不同的组件，那么就是组件化的应用，同学其实就是跟什么呢？就跟那个美女和美丽的是一个意思，是吧，美丽的就是一个形容词啊，那美女呢，其实就是一个名词，嗯，就这么回事儿，哎，所以说同学要说的再详细一点吧，其实就这么回事，你回到PPT里，我再给你唠叨一句，同学，你看我现在就拿这个hier组件来举例子，各位，我问你CSS是不是一个片段，是不是一个结构，这这是不是就正常啊，对吧？你看同学我没有必要写一堆结构，我非得把这个CSS拆成十个没有必要片段呢？同学，那就是你这个结构该什么样就什么样呗，但是它呢，同学，你可以用一点别的技术了，你就比如说这个GS啊，它里边代码特别多，它交互性特别强，这里边啊举个例子，有3000多行代码啊，有3000多行，那你就可以把这个庞大的GS咋的拆成几个小的，也就是说是这。

这样子了，哎，把它复制一份，走再来一个，走再来一个，但是我不管你怎么写，你这些JS都是属于谁的，都是属于hier的，这回明白了吧，哎，这个粉色区域叫啥叫GS的模块化，整个红色的是今天新学的那玩意儿叫啥叫组件是不？各位哎，好了，那这一小节呢，我们停一下。