vue学习笔记：组件的使用和生命周期的详细介绍

灰太狼 2024-04-17 14:05 44阅读 0赞

一、Vue中组件的使用

在vue中，初始只有一个根组件，默认加载的组件，如果我们想加载一下别的页面，或者是组件的时候，应该怎么做呢？

这个时候我们可以先在src目录下面创建新的组件HelloWorld.vue和life.vue，如图：

![20190827104022776.png][]

父组件html：

子组件html：

<template>
      <div class="hello">
          <h2>这是一个首页子组件</h2>
          <v-life></v-life>
      </div>
    </template>

每个组件中都由三部分组成，html、js、css组成，然后根据我们的需要进行添加文本和样式以及js操作，如果想要吧新创建的组件在根组件中引用，我们就需要在父组件中首先引入子组件：

![20190827104344732.png][]

在父组件js的头部引入子组件，然后进行组建的注册，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

在组件中创建components进行注册。

组件的使用：在父组件中直接引入子组件注册的标签即可

![20190827105026240.png][]

这样我们就能在页面上看到父组件加载了子组件

![20190827105106213.png][]

除此之外.HelloWorld组件也能有自己的子组件，比如life.vue组件，和上面加载组件方法一样，结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1][]

二、vue生命周期的介绍

在vue中，生命周期有八个，下面简单介绍一下生命周期的含义，稍后介绍一下生命周期使用的情景或者是触发的情况。

beforeCreate：实例创建之前

created：实力创建完成之后

beforeMount：模板编译之前

mounted：模板编译完成

beforeUpdate：数据更新之前

updated：数据更新完成

beforeDestroy：实例销毁之前

destroyed：实例销毁完成

下面就介绍一下生命周期的使用：

一般情况下，比较常用的就是mounted和beforeDestroy和destroyed，mounted生命周期中可以进行初始化的dom操作和数据加载，beforeDestroy和destroyed一般都是实力晓辉之前和销毁完后才能之后触发的，比如在一个父组件中引入子组件，当给子组件添加一个v-if标签，当点击一个按钮时候，让子组件进行加载和销毁，这时候整个过程加载组件就会先触发beforeCreate、created、beforeMount、mounted生命周期，点击按钮就会触发beforeDestroy和destroyed生命周期，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3][]

当我们点击按钮的时候：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 5][]

当我们修改数据的时候就会触发beforeUpdate和updated生命周期，如下添加一个按钮：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 6][]

点击修改数据之后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 7][]

以上就是vue中生命周期的简单介绍和使用以及触发的情况，有什么不懂得可以留言一起学习进步呦！

[20190827104022776.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ab1ec1120fe74263a6cd8b25dd15ef72.png
[20190827104344732.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0f2c3efa0f2245dd834cc830a0926f26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1d95ad5800024cc0b3e88d286057dc0d.png
[20190827105026240.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3d0aef4254b5447780038efe63b9dbc2.png
[20190827105106213.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/28202b5df0274108815ebec0a88ee73e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/945f8eddb73740819df15aa1e56344cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0594368d25254921b83dfcdb73c1540f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0796244b1e584b2fb4133c32e534a047.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/47ff953e9da34c67948f35d74ade8942.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/cdf7853b07504bfc9aaba24ac059d36c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0858b037825549c28ff1230032aa2667.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6f0f4209a1bc4aa087d52e4485ef83b4.png