【Vue】组件、组件生命周期、钩子函数

目录

组件 and 组件化

组件

组件化

组件的使用

创建

导入

注册

使用

局部注册

全局注册

定义

语法

组件的生命周期

什么是组件的生命周期

组件生命周期的四个阶段

组件生命周期钩子

钩子函数

组合式API生命周期钩子

组件 and 组件化

组件

        定义：组件是一个独立的、可复用的Vue实例，也是一个独立的UI视图，代码上体现为单独的.vue文件，包含JS+HTML+CSS三个部分组成

        使用方法：把需要复用的HTML结构抽离并封装到一个单独的.vue文件中，连同所需要的CSS和JS全部抽离，放在components目录下的.vue文件中。在App.vue中导入组件，通过自定义标签使用

        好处：各自独立（不需要考虑变量重名），便于复用，组件的目的就是提高html结构的复用性

组件化

        是一种代码的开发思想，该思想的是指就是我们可以把一个大的页面进行拆分，拆分成一系列小的组件（单独的UI视图），通过组件的拼装和组合，得到一个成型的大的网页，从而可以化大为小，化繁为简，分而治之，提高代码的复用性和维护性

使用示例

在src目录下，与App.vue同级，创建components目录，在这个目录下创建需要的组件(.vue文件)，随后在App.vue中导入（import），在App.vue中，将导入的当作标签使用即可。

如下:

./components/Mypanel.vue

<template>
    <div class="panel">
        <div class="title">
            <h4>自由与爱情</h4>
            <span class="btn" v-on:click="flg = !flg">{{ flg ? '收起' : '展开' }}</span>
        </div>
        <div class="container" v-show="flg">
            <p>生命诚可贵，</p>
            <p>爱情价更高。</p>
            <p>若为自由故，</p>
            <p>两者皆可抛。</p>

        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    const flg=ref(true);
</script>

<style>
    .panel {
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            padding: 0 1em;

            h4 {
                margin: 0;
                line-height: 2;
            }

            .btn {
                cursor: pointer;
            }
        }

        .container {
            border: 1px solid #ccc;
            padding: 0 1em;

        }
    }
</style>

App.vue

<template>
  <h3>可折叠面板</h3>
  <!-- 使用组件 -->
  <Mypanel/>
</template>

<script setup>
  // 导入组件
  import Mypanel from './components/Mypanel.vue'; 
</script>
<!-- 如果指明了lang="scss",项目运行不起来，需要安装sass模块，命令行执行：npm install sass -g 或者  pnpm add -D sass-embedded -->
<style lang="scss">
  body{
    background: #ddd;
  }
  #app{
    width:400px;
    margin: 20px auto;
    padding: 1em 2em 2em;
    border:4px solid green;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    background: #fff;
    h3{
      text-align: center;
    
    }
  }

</style>

让组件支持less/scss

style标签，lang="less/scss"开启less/scss功能

装包：npm i less less-loader -D 或者 npm i sass -D

组件的使用

创建

新建.vue文件，填充3部分代码=script+template+style。

注意：

• 每新建一个.vue文件，内部会默认导出这个组件对象。
• 当某段标签需要重用时，就可以封装组件了

导入

哪里需要组件，在哪里导入即可

import  组件对象 from '组件的相对路径'

注册

1. 局部组件无需注册：局部组件仅限于在哪个vue文件中导入，在哪个vue文件中可用，其他的vue文件要想使用，也需要导入。
2. 全局组件需在main.js中注册：全局组件，一旦注册了，可以在任意的vue文件中可用。

使用

把组件当作一个自定义标签使用即可

1. 可以是双标签
2. 也可以是单标签
3. 可以是大驼峰也可以是小驼峰，或者烤串法（推荐，例：my-panel）

局部注册

./components/创建三个组件

header.vue

<template>
<div class="header">
    我是header
</div>
</template>

<script setup>
        
</script>

<style lang="scss">
    .header{
        margin: 0 auto;
        height: 100px;
        line-height: 100px;
        background-color: purple;      
    }
</style>

 main.vue

<template>
<div class="main">
    我是main
</div>
</template>

<script setup>
        
</script>

<style scoped>
    .main{
        margin: 20px 0;
        height: 400px;
        line-height: 400px;
        background-color: orange;
    }
</style>

footer.vue

<template>
<div class="footer">
    我是footer
</div>
</template>

<script setup>
        
</script>

<style scoped>
    .footer {
        height: 100px;
        line-height: 100px;
        background-color: blue ;
    }
</style>

在根组件App.vue导入这三个组件

<template>
  
<div>
  <myHeader/>
  <myMain/>
  <myFooter/>
</div>
</template>

<script setup>
    import myHeader from './components/header.vue'
    import myMain from './components/main.vue'
    import myFooter from './components/footer.vue'
</script>

<style >
  *{
    margin: 0;
    padding: 0;
  }
  #app{
    height: 100vh;
    padding: 15px 20px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background: skyblue;
  }
</style>

全局注册

定义

在main.js中注册，一旦注册了，可以在任意的vue文件中可用；局部组件只在当前导入的vue中可用。

语法

const app=createApp(App)

import 组件对象 from '组件的相对路径'

app.component('组件名',组件对象)

示例：

main.js

import { createApp } from 'vue'
import App from './App.vue'


//导入MyPanel组件
import MyPanel from './components/MyPanel.vue'

//创建应用并指定渲染位置
const app = createApp(App)

//全局注册组件
app.component('my-panel', MyPanel)

//挂载应用
app.mount('#app')

组件的生命周期

什么是组件的生命周期

一个Vue组件（实例）从创建到卸载/销毁的整个过程，是单行线，不可逆的。

组件生命周期的四个阶段

1. 创建：创建响应式数据和函数
2. 挂载：渲染模板（把组件的template下的标签插入到真实DOM树上）
3. 更新：如果数据变了，重新渲染
4. 卸载/销毁：把组件移除，从DOM删除

组件生命周期钩子

        在组件生命周期的4个阶段中，会自动执行一些函数，这些自动执行的函数就称为生命周期钩子函数，简称钩子。

        钩子的本质就是函数，只不过这些函数无需我们调用，而是由vue3 内部执行的机制自动调用。钩子函数存在的意义就是给了程序员，在特定的时机有添加自己的代码的机会，比如组件创建完毕了，就想发送ajax请求，那么可以在创建后的钩子函数中编写相关代码；还比如页面渲染完毕后，立刻让输入框自动聚焦，那么可以在挂载后的钩子函数中编写相关代码。

钩子函数

钩子函数一共有8个，也可以说是9个。分别是：

• 创建阶段：1、beforeCreate() 创建前，2、created() 创建后
• 挂载阶段：1、beforeMount() 挂载前，2、mounted() 挂载后
• 更新阶段：1、beforeUpdate() 更新前，2、updated() 更新后
• 卸载阶段：1、beforeUnmount() 卸载前，2、unmounted() 卸载后
• 第九个就是：setup()

这九个钩子函数在组件的生命周期里的调用时机如下：

vue编写代码的风格：

1. 选项式API：在vue2中，返回数据写在data里，方法写在method里，这种方法就是选项式API
2. 组合式API：setup简写方式就是组合式API

如果在beforeCreate()函数中访问数据或方法，则返回undefined

<script>
    export default {
        //提供响应式数据
        data() {
            return {
                count: 0
            }
        },
        //提供方法
        methods: {
            increment() {
                this.count++
            }
        },
        setup() {   
            //……
        },
        beforeCreate() {    
            //……
        },
        created() {    
            this.increment()
        }
    }
</script>

组合式API生命周期钩子

上面的介绍是vue2选项式API下的钩子函数的使用，在vue3中我们使用setup简写，是组合式API.

首先在组合式API下，需要在script按需导入钩子,如下：

<script setup>
    import {onMounted} from 'vue'
    onMounted(() => {
        console.log('mounted')
    })
</script>