课程内容：
2022.09.05的学习内容：

vue基础入门（中）

1-1 组件的定义及复用性，局部组件和全局组件（1）

打开这张图我们来看。‍‍我们说一个网页可以把它拆解成很多的部分，比如说图片左边的网页，我可以把它拆解成头部导航栏‍‍，然后我还可以把它拆成左侧的这一部分和右侧的这一部分，‍‍每个部分我可以再继续往下拆，比如说左侧再有两个部分，然后右侧再给它拆成三个部分，‍‍我们这么去拆就会发现可以把一个网页层层的进行拆分，拆成一个树状的结构。‍‍

那么我们看‍‍对应的最顶层的树的根节点指的是什么？指的是不是整个的大网页。‍‍ 大网页拆成三个部分，分别是头，左侧和右侧，所以拆成了三个小的‍‍子组件，所以一个页面由三个组件组成。

我们再来看，‍‍第一个组件是头部组件，它就是自己这么一个组件，那不用再拆了，‍‍而左侧的区块组件我可以再把它拆成上部分的和下部分的两个子组件。那么‍‍这样的一个区块也就这样的一个组件，又被拆成两个小的组件了，‍‍

右侧的这个部分一样的又被拆成三个小的组件了，所以这样的话‍‍构成了页面和树状结构的一个关系。‍‍

我们仔细再来想，‍‍我们说组件的定义是什么？组件是不是页面上的一部分？‍‍实际上我们在做拆分的过程中，是不是就把一个大的页面这样的一个节点拆成了很多小的节点，‍‍最终再通过连线把小的节点连成一个完整的树，那么用这棵树来表示整个一个的网页结构，‍‍所以这样的话大家其实可以弄清楚组件和页面之间的关系了，‍‍我们很多小的组件它是页面上的一部分，把它们层层的进行拼装，‍‍最终我们就可以拼装成一个大的网页了，这就是组件设计的理念，‍‍把一个复杂的网页拆成很多小的部分来进行维护。‍‍

那么回到我们的代码里面，

我们继续通过代码带大家去了解组件，‍‍ 我们来分析一下，‍‍比如说我去通过 Vue点createAPP去创建一个内容，‍‍这个时候我们创建的是组件吗？实际上我们现在创建的是一个Vue的实例或者叫做Vue的应用，‍‍我们现在创建了一个Vue的应用，并不是创建一个Vue的组件，但是在创建应用的时候它会接受一个参数，‍‍这个参数它会决定Vue的根组件怎么去渲染，

也就是我们看到的刚才的根组件是什么样子的，‍‍

由这个对象来决定，所以根组件比如说是一个template，然后里面我写一个div，其他的什么也没有。‍‍hello world，‍‍那么我们到页面上来看，刷新它展示的就是hello world，

为什么? 我创建了一个Vue的应用，‍‍根组件也没有再进行拆分，那么它显示的就是hello world，所以到根组件这一层，它就结束了。‍‍

继续，我们可以再做一些组件的拆分，我们说我们想做一个子组件，我们该怎么办？ 比如说我这里我写两个东西，‍‍

我们到页面上看，

那么这个时候我还是只有一个根组件，但当我的页面变得越来越大的时候，假设我希望把这块区域拆出去作为一个组件来维护，‍‍这块区域也拆出去做一个组件来维护，我可以怎么办？‍‍

我可以在这里去定一个子组件 app.component(妙啊)，‍‍ 我们可以定义一个叫做hello的子组件， 然后我们再创建一个叫做world的子组件， 在这里我调用一下‍‍hello 子组件和world的子组件，怎么调？ 直接通过这种标签的形式就可以了：

我们看一下效果是不是一样的，到页面上刷新一样的，它会展示出hello和world，

这个时候页面的组织结构已经变了，‍‍以前我们只有一个组件，现在我拆成几个了？‍‍‍‍根组件还在，

那么有子组件分别是hello和world，那么我们是不是就摘出了两个子组件，然后我们再把两个子组件和根组件建立起关系，根组件调用两个子组件，‍‍

这就把一个复杂的页面拆成几个部分进行维护了，是不是整个页面的维护成本就可以得到有效的降低，这就是组件的一个理念，‍‍我们通过代码给大家讲解了一下。‍‍

接下来我来举一个其他的例子，更复杂的例子，‍‍我们现在只创建一个组件叫做counter， 上面我们调一下 counter组件，【18行】这块我显示一个counter，

然后我对 counter 做一些逻辑，就是data里面定义一个数据，叫count，‍‍默认值是1， 这里面我们就用@click绑定一个事件，handleDivClick，或者我们直接简写，count等于加等于一，每次点击让count加一，‍‍

那么我们说组件的概念是我把一个复杂的应用拆成了很多小的‍‍子组件，然后去做拆分之后再把它合并到一起，从而降低我项目维护的成本。‍‍那么组件除了它是页面上的一部分之外，其实组件还有一个特点，一般来说它具备一定的复用性，‍‍比如说我现在写了这样的一个counter组件，‍‍实际上每一个组件它可以具备复用性，就是说这个组件可以被复制出多个在这里反复的使用。

我现在是不是就有三个这样的组件了？我们点第一个它会加一，会不会影响到其他的两个组件？‍‍不会影响到，那么我们就能看到实际上组件是可以被复用的。‍‍同时在复用的过程里面，我们也看到了每一个组件它的数据是共用的吗？它是不是自己独立的呀？‍‍（是的啊）

组件具备共用性或者复用性，组件里面的数据是被‍‍当前组件所独享的，而不会和其他同名的组件共享。‍‍

我们继续来往下讲，现在比如说我在 counter里面，‍‍我再去定义一个组件，

比如说在这里我定一个counter parent 这样的一个组件，好，我来写组件，复制一个‍‍，

它这里面干什么的，它其实什么也没干，它只是做了一层中转，‍‍我这里直接去写一个counter，

其实每1个都是1个counter，只不过第一个counter我把它又包了1层，‍‍我创建了一个叫做counter parent这样的组件，‍‍在组件里我再去调用counter，实际上中间做了一层无用的中转，

通过这个例子大家可以看到，‍‍其实当我们去用这个app.component的方法定义一个组件的时候，组件‍‍它可以在哪里使用，它可以在父组件里去直接使用 counter。‍‍那么在其他的子组件里面，比如说 counter parent它是一个子组件，这个子组件里面能不能用 counter？也能用，‍‍也就是app.component定义的这种组件，它是一个全局组件，‍‍只要你定义了，你在哪里都可以使用，不仅在父组件里可以用，在其他的组件里面也能用。‍‍

那么这种全局组件好不好？我举个例子，比如说现在我定义了这两个全局组件，通过app.component去定义它了，‍‍

但在这里面我只写了一个hello world，我这个父组件现在有没有用到这两个定义的全局组件是不是没用到？‍‍‍‍

但是这两个全局组件会不会一直存在，会不会一直占用app的存储空间，会不会一直挂在 app上，‍‍其实它会一直挂在上面的，也就即便你不用这两个组件，实际上这两个组件也一直都在app上挂着，‍‍所以它对性能是有一定的损耗的，你不用它它也在。

全局组件只要定义了处处可以使用但性能不高，但是使用起来简单。