Vue学习之旅：从生命周期到工程化开发与组件实践（生命周期+工程化开发）

Vue学习之旅：从生命周期到工程化开发与组件实践

在Vue的学习进程中，今天接触了Vue的生命周期、工程化开发以及组件化相关的丰富内容。这些知识对于构建高效、可维护的Vue应用至关重要，下面我将详细分享今天的学习收获。

一、Vue生命周期：理解组件的“一生”

Vue生命周期指的是一个Vue实例从创建到销毁的整个过程，这一过程可分为四个阶段：创建、挂载、更新和销毁。

（一）生命周期的四个阶段

1. 创建阶段：在这个阶段，Vue实例开始创建，会进行响应式数据的初始化等操作。虽然此时数据已准备好，但DOM尚未渲染，无法进行DOM操作。例如在创建一个计数器的实例时：

data: {
   
   
  title: '计数器',
  count: 100
}

在创建阶段，title 和 count 数据被初始化，但我们无法直接操作DOM元素来显示它们。
2. 挂载阶段：Vue会将模板渲染成真实的DOM，此时可以开始操作DOM。如在新闻列表案例中，当模板渲染完成后，我们可以获取新闻列表的DOM元素并进行一些初始化操作 ，mounted 钩子函数会在这个阶段被调用。
3. 更新阶段：当响应式数据发生变化时，Vue会自动更新视图。在这个阶段，数据的修改会触发视图的重新渲染，以保证数据与视图的一致性。
4. 销毁阶段：Vue实例被销毁，此时可以进行一些资源的释放操作，比如清除定时器、延时器等。在 destroyed 钩子函数中执行这些操作，确保应用在销毁时不会留下无效的资源占用。

（二）生命周期钩子函数

Vue在生命周期的各个阶段会自动运行一些函数，称为生命周期钩子函数，这让开发者能够在特定阶段运行自己的代码。

1. created：在数据准备好后调用，适合发送初始化渲染请求。在小黑记账清单案例中，可在这个钩子函数中请求数据，并将数据更新给 data，实现数据的动态渲染。

created() {
   
   
  // 发送初始化数据请求，假设这里使用axios库
  axios.get('your-api-url').then((response) => {
   
   
    this.data = response.data;
  });
}

2. mounted：模板渲染完成后调用，可以开始操作DOM。在实现输入框自动聚焦功能时，可以在 mounted 钩子函数中获取输入框的DOM元素并调用聚焦方法：

mounted() {
   
   
  this.$refs.inputElement.focus();
}

这里假设在模板中有一个输入框，并通过 ref 指令为其设置了 inputElement 的引用。

如：

<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: ''
    },

    mounted() {
     
     
      document.querySelector('#inp').focus()
    },
  })
</script>

</body>

就可以使输入框具有自动聚焦的功能

二、综合案例：小黑记账清单

项目概述

我们要实现的小黑记账清单是一个简单的财务管理应用，用户可以在页面上添加账单，查看账单列表，删除账单，并通过饼图直观地展示消费分布情况。下面我们将详细分析每个功能的实现细节。

项目代码结构

（一）HTML 部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Bootstrap 的 CSS 样式文件 -->
    <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=