Vue2篇——第三章 Vue 生命周期与组件化开发全解析(理解)

Vue生命周期与组件化开发摘要 Vue生命周期分为四个阶段：创建（初始化数据）、挂载（渲染DOM）、更新（数据变更）和销毁。关键钩子函数如created（最早发送请求）和mounted（DOM操作）让开发者能在特定阶段执行代码。组件化开发将页面拆分为独立组件（结构+样式+行为），分为根组件（App.vue）和普通组件。组件注册方式：局部注册：通过import导入，在components选项注册

2403_88453964

978人浏览 · 2025-08-18 16:40:12

2403_88453964 · 2025-08-18 16:40:12 发布

Vue生命周期与组件化开发摘要

Vue生命周期分为四个阶段：创建（初始化数据）、挂载（渲染DOM）、更新（数据变更）和销毁。关键钩子函数如created（最早发送请求）和mounted（DOM操作）让开发者能在特定阶段执行代码。

组件化开发将页面拆分为独立组件（结构+样式+行为），分为根组件（App.vue）和普通组件。组件注册方式：

局部注册：通过import导入，在components选项注册，仅限当前组件使用
全局注册：在main.js使用Vue.component()，全项目可用

命名规范推荐PascalCase（MyComponent）或kebab-case（my-component）。工程化开发通过Vue CLI脚手架实现标准化配置，提升开发效率。

一、Vue生命周期

思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1.创建阶段：创建响应式数据

2.挂载阶段：渲染模板

3.更新阶段：修改数据，更新视图

4.销毁阶段：销毁Vue实例

二、Vue生命周期钩子

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1.创建阶段(准备数据)
      beforeCreate(){
        console.log('beforeCreate 响应式数据准备好之前',this.count)
      },
      created(){
        console.log('created 响应式数据准备好之后',this.count)

        // this.数据名 = 请求回来的数据
        // 可以开始开始发送初始化渲染的请求了
      },
      // 2.挂载阶段(渲染模板)
      beforeMount(){
        console.log('beforeMount 模板渲染之前',document.querySelector('h3').innerHTML)


      },
      mounted(){
        console.log('mounted 模板渲染之后',document.querySelector('h3').innerHTML)

        // 可以开始操作DOM了
      },
      // 3.更新阶段(修改数据触发->更新视图)
      beforeUpdate(){
        console.log('beforeUpdate 数据更新之前,视图还没更新',document.querySelector('span').innerHTML)
      },
      updated(){
        console.log('updated 数据更新之后,视图已经更新了',document.querySelector('span').innerHTML)
      },
      // 4.销毁阶段(销毁)
      beforeDestroy(){
        console.log('beforeDestroy 组件销毁之前')
      },
      destroyed(){
        console.log('destroyed 组件销毁之后')
      },

    })
  </script>
</body>

</html>

三、生命周期钩子小案例

1.在created中发送数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .news {
      display: flex;
      height: 120px;
      width: 600px;
      margin: 0 auto;
      padding: 20px 0;
      cursor: pointer;
    }
    .news .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 10px;
    }
    .news .left .title {
      font-size: 20px;
    }
    .news .left .info {
      color: #999999;
    }
    .news .left .info span {
      margin-right: 20px;
    }
    .news .right {
      width: 160px;
      height: 120px;
    }
    .news .right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>

  <div id="app">
    <ul>
      <li class="news" v-for="(item,index) in list":key="item.id">
        <div class="left">
          <div class="title">{{item.title}}</div>
          <div class="info">
            <span>{{item.source}}</span>
            <span>{{item.time}}</span>
          </div>
        </div>
        <div class="right">
          <img :src="item.img" alt="">
        </div>
      </li>

    </ul>
  </div>
  <script src="./vue.js"></script>
  <script src="./axios.js"></script>
  <script>
    // 接口地址：http://hmajax.itheima.net/api/news
    // 请求方式：get
    const app = new Vue({
      el: '#app',
      data: {
        list:[]
      },
      async created(){
        const res = await axios.get('http://hmajax.itheima.net/api/news')
        this.list = res.data.data
      }

    })
  </script>
</body>
</html>

2.在mounted中获取焦点


<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>示例-获取焦点</title>
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 核心样式 -->
  <style>
    html,
    body {
      height: 100%;
    }
    .search-container {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    .search-container .search-box {
      display: flex;
    }
    .search-container img {
      margin-bottom: 30px;
    }
    .search-container .search-box input {
      width: 512px;
      height: 16px;
      padding: 12px 16px;
      font-size: 16px;
      margin: 0;
      vertical-align: top;
      outline: 0;
      box-shadow: none;
      border-radius: 10px 0 0 10px;
      border: 2px solid #c4c7ce;
      background: #fff;
      color: #222;
      overflow: hidden;
      box-sizing: content-box;
      -webkit-tap-highlight-color: transparent;
    }
    .search-container .search-box button {
      cursor: pointer;
      width: 112px;
      height: 44px;
      line-height: 41px;
      line-height: 42px;
      background-color: #ad2a27;
      border-radius: 0 10px 10px 0;
      font-size: 17px;
      box-shadow: none;
      font-weight: 400;
      border: 0;
      outline: 0;
      letter-spacing: normal;
      color: white;
    }
    body {
      background: no-repeat center /cover;
      background-color: #edf0f5;
    }
  </style>
</head>

<body>
<div class="container" id="app">
  <div class="search-container">
    <img src="https://www.itheima.com/images/logo.png"alt="">
    <div class="search-box">
      <input type="text" v-model="words" id="inp">
      <button>搜索一下</button>
    </div>
  </div>
</div>

<script src="./vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      words: ''
    },
    // 核心思路:
    // 1.等输入框渲染出来
    // 2.让输入框获取焦点
    mounted() {
      // console.log(document.querySelector('#inp'))
      document.querySelector('#inp').focus()
    }
  })
</script>

</body>

</html>

四、案例-小黑记账清单

1.需求图示：

2.需求分析

1.基本渲染

2.添加功能

3.删除功能

4.饼图渲染

3.思路分析

1.基本渲染

立刻发送请求获取数据 created
拿到数据，存到data的响应式数据中
结合数据，进行渲染 v-for
消费统计 —> 计算属性

2.添加功能

收集表单数据 v-model，使用指令修饰符处理数据
给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
请求成功后，对文本框内容进行清空
重新渲染列表

3.删除功能

注册点击事件，获取当前行的id
根据id发送删除请求
需要重新渲染

4.饼图渲染

初始化一个饼图 echarts.init(dom) mounted钩子中渲染
根据数据试试更新饼图 echarts.setOptions({...})

4.完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      .red {
        color: red!important;
      }
      .search {
        width: 300px;
        margin: 20px 0;
      }
      .my-form {
        display: flex;
        margin: 20px 0;
      }
      .my-form input {
        flex: 1;
        margin-right: 20px;
      }
      .table > :not(:first-child) {
        border-top: none;
      }
      .contain {
        display: flex;
        padding: 10px;
      }
      .list-box {
        flex: 1;
        padding: 0 30px;
      }
      .list-box  a {
        text-decoration: none;
      }
      .echarts-box {
        width: 600px;
        height: 400px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
      tfoot {
        font-weight: bold;
      }
      @media screen and (max-width: 1000px) {
        .contain {
          flex-wrap: wrap;
        }
        .list-box {
          width: 100%;
        }
        .echarts-box {
          margin-top: 30px;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
            <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
            <button @click="add" type="button" class="btn btn-primary">添加账单</button>
          </form>

          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>消费名称</th>
                <th>消费价格</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in list":key="item.id">
                <td>{{index+1}}</td>
                <td>{{ item.name }}</td>
                <td :class="{red: item.price >500 }">{{ item.price.toFixed(2) }}</td>
                <td><a href="javascript:;" @click="del(item.id)">删除</a></td>
              </tr>
            <tfoot>
              <tr>
                <td colspan="4">消费总计：{{totalPrice.toFixed(2)}} </td>
              </tr>
            </tfoot>
          </table>
        </div>
        
        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="../echarts.min.js"></script>
    <script src="../vue.js"></script>
    <script src="../axios.js"></script>
    <script>
      /**
       * 接口文档地址：
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
       * 
       * 功能需求：
       * 1. 基本渲染
       * (1) 立刻发送请求获取数据 created
       * (2) 拿到数据，存到data的响应式数据中
       * (3) 结合数据,进行渲染v-for
       * (4) 消费统计 => 计算属性
       *
       * 2. 添加功能
       *  (1) 收集表单数据 v-modal
       *  (2) 给添加按钮注册点击事件,发送添加请求
       *  (3) 需要重新渲染
       *
       * 3. 删除功能
       *  (1)注册点击事件, 传参传id
       *  (2)根据id发送删除请求
       *  (3)需要重新渲染
       *
       * 4. 饼图渲染
       *  (1)初始化一个饼图 用echarts
       *  (2)根据数据实时更新拼图
       *
       */
      const app = new Vue({
        el: '#app',
        data: {
          list:[],
          name:'',
          price:''
        },
        computed:{
          totalPrice(){
            return this.list.reduce((sum,item)=>sum+item.price,0)
          }
        },
         async created(){
           //    const res = await axios.get(
           //            'https://applet-base-api-t.itheima.net/bill',
           //           {
           //             params:{
           //               creator:"小黑"
           //             }
           //   }
           //    )
           // this.list = res.data.data

           this.getList()
        },
        methods:{
            async add(){

              if (!this.name || typeof this.price!=='number'){
                return alert('请填写正确的名称和价格')
              }

            const res =await axios.post(
                    'https://applet-base-api-t.itheima.net/bill',
                    {
                  creator:'小黑',
                      name: this.name,
                      price:this.price
              } )
              // 重新渲染
              this.getList()
              this.price = this.name=''
            },
          async getList(){
            const res = await axios.get(
                        'https://applet-base-api-t.itheima.net/bill',
                        {
                          params:{
                            creator:"小黑"
                          }
                        }
                )
                this.list = res.data.data

              // 更新图表
              this.mychart.setOption(
                {
                  series:[
              {
                name:"消费账单",
                type:'pie',
                radius:'50%', //半径
                data:this.list.map(item =>({name:item.name,value:item.price}))
              }
            ],
                }
              )
              },
          async del(id){
              // 根据id发送删除请求
              const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
            // console.log(res)
              // 重新渲染
            this.getList()



          }
        },
        mounted(){
          this.mychart = echarts.init(document.querySelector('#main'))
          this.mychart.setOption(
                  {
                    // 大标题
                  title:{
                    text:'消费账单列表',
                    left:'center'
                  },
                    // 提示框
                 tooltip:{
                  trigger:'item'
                      },
                    // 图例
                 legend:{
                    orient:'vertical',
                      left:'left'
                    }
          }
          )
        }
      })
    </script>
  </body>
</html>

五、工程化开发和脚手架

1.开发Vue的两种方式

核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

工程化开发模式优点：

提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等

工程化开发模式问题：

webpack配置不简单
雷同的基础配置
缺乏统一的标准

为了解决以上问题，所以我们需要一个工具，生成标准化的配置

2.脚手架Vue CLI

基本介绍：

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处：

开箱即用，零配置
内置babel等工具
标准化的webpack配置

使用步骤：

全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
查看vue/cli版本： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)=>vue init webpack project-name(项目名不能使用中文)(废弃版)
启动项目：npm run dev(命令不固定，找package.json)
退出项目:ctrl+c

六、项目目录介绍和运行流程

1.项目目录介绍（完整版）

虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可

main.js 入口文件
App.vue App根组件
index.html 模板文件

2.运行流程

七、组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

好处：便于维护，利于复用 → 提升开发效率。

组件分类：普通组件、根组件。

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

总结：

组件化的好处是什么？

页面可以拆分成一个个组件，每个组件有着独立的结构、样式、行为

便于维护,利于复用->提示开发效率。

组件的分类？

组件分类:普通组件、根组件

整个应用最上层的组件,包含所有普通小组件。

一个根组件App.vue，包含的三个部分:

1.template结构(只能有一个根节点)---->html模块

2.style样式(可以支持less，vscode需要装less和less-loader包，webStrom不需要)---->cs模块（CSS）

3.script行为---->js模块（JavaScript）

八、根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件

2.组件是由三部分构成

语法高亮插件(vsCode)

三部分构成
- template：结构（有且只能一个根元素）
- script: js逻辑
- style：样式 (可支持less，需要装包)
让组件支持less

（1） style标签，lang="less" 开启less功能

（2）装包: yarn add less less-loader -D 或者npm i less less-loader -D

3.总结

App组件包含哪三部分？

说明：

模板(template)是组件的骨架，决定用户看到的内容
脚本(script)是组件的大脑，处理所有交互逻辑
样式(style)是组件的外观，控制视觉表现
scoped 样式可避免全局污染（推荐使用）
在 Vue 3 中，<script setup> 语法可进一步简化代码

九、普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

创建.vue文件（三个组成部分）
在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可 <组件名></组件名>

4.注意：

组件名规范 —> 大驼峰命名法，如 HmHeader

5.语法：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default {•  // 局部注册
  components: {
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

6.总结

A组件内部注册的局部组件能在B组件使用吗?

不能。
局部注册的组件仅在注册它的父组件作用域内可用：

在A组件注册的局部组件只能在A组件的模板中使用
无法在B组件或其他组件中直接使用
这是Vue组件作用域的基本规则

局部注册组件的步骤是什么?

使用import导入组件文件
在组件的components选项中声明
定义组件标签名（建议使用kebab-case或PascalCase）
在模板中以自定义标签形式使用

使用组件时应该按照什么命名法?

Vue官方推荐两种命名方式：

(1) PascalCase（大驼峰命名法）

组件定义文件名：MyComponent.vue
在模板中使用：<MyComponent>
特点：
- 符合JavaScript标识符命名规范
- 在单文件组件和JSX中推荐使用
- Vue编译器自动识别大小写

(2) kebab-case（短横线命名法）

组件定义文件名：my-component.vue
在模板中使用：<my-component>
特点：
- 兼容HTML不区分大小写的特性
- 在DOM模板（直接写在HTML中）时必须使用

十、普通组件的注册使用-全局注册

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤

创建.vue组件（三个组成部分）
main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —> 大驼峰命名法，如 HmHeader

5.语法

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

例：

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

6.总结

1.全局注册组件应该在哪个文件中注册以及语法是什么？

在 Vue 项目中，全局组件通常在入口文件 main.js 或 main.ts 中注册，确保在根 Vue 实例创建前完成注册

注册方式说明

方法	说明
`app.component('组件名', 组件对象)`	Vue 3 标准注册方式
`Vue.component('组件名', 组件对象)`	Vue 2 注册方式
组件名规则	推荐 PascalCase 命名（自动支持 kebab-case）

2.全局组件在项目中的任何一个组件中可不可以使用？

是的，全局注册的组件可以在项目中的任何一个组件中直接使用，无需额外导入或注册

全局组件特性：

特性	说明
作用范围	整个 Vue 应用
使用限制	所有单文件组件(.vue)中均可直接使用
命名冲突	全局组件名必须唯一（重复注册会覆盖）
性能影响	会增加初始包体积（不常用组件建议局部注册）

全局组件 vs 局部组件

特性	全局组件	局部组件
注册位置	入口文件(main.js)	单个组件内部
可用范围	整个应用	仅当前组件
组件名要求	必须唯一	局部作用域内唯一
打包优化	无法被 tree-shaking	可被 tree-shaking
适用场景	基础UI组件(Button/Icon)	业务专用组件

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

推理平台全景

2048 AI社区

GraphRAG进阶：基于Neo4j与LlamaIndex的DRIFT搜索实现详解

微软的GraphRAG算得上是最早一批成熟的GraphRAG系统，它把索引阶段（抽取实体、关系、构建层级社区并生成摘要）和查询阶段的高级能力整合到了一起。这套方案的优势在于，可以借助预先计算好的实体、关系、社区摘要来回答那些宏观的、主题性的问题，这恰恰是传统RAG系统基于文档检索难以做到的。本文的重点是DRIFT搜索：Dynamic Reasoning and Inference with Fle