Vue2向Vue3过度核心技术生命周期

小灰灰 2024-03-24 21:35 82阅读 0赞

#### 目录 ####

*   *  1 Vue生命周期
     *  2 Vue生命周期钩子
     *  3 生命周期钩子小案例
     *   *  1.1 在created中发送数据
         *  1.2 在mounted中获取焦点
     *  4 案例-小黑记账清单
     *   *  4.1 需求图示：
         *  4.2 需求分析
         *  3.思路分析
         *  4.代码准备

--------------------

### 1 Vue生命周期 ###

![在这里插入图片描述][eef47f3050d94e2c9f5050c7a1e74c8b.png]

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

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

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

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

2.挂载阶段：渲染模板

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

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

![在这里插入图片描述][c0deb05e104f48dea0fced278fd8400e.png]

### 2 Vue生命周期钩子 ###

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

![在这里插入图片描述][9b9985c3bac846f6963a829cd33015a7.png]

<div id="app">
        <h3>{
       { title }}</h3>
        <div>
          <button @click="count--">-</button>
          <span>{
       { count }}</span>
          <button @click="count++">+</button>
        </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        const app = new Vue({
          
          el: '#app',
          data: {
          
            count: 100,
            title: '计数器'
          },
          // 1. 创建阶段（准备数据）
         
    
          // 2. 挂载阶段（渲染模板）
          
    
          // 3. 更新阶段(修改数据 → 更新视图)
          
    
          // 4. 卸载阶段
         
        })
      </script>

### 3 生命周期钩子小案例 ###

#### 1.1 在created中发送数据 ####

#### 1.2 在mounted中获取焦点 ####

### 4 案例-小黑记账清单 ###

#### 4.1 需求图示： ####

![在这里插入图片描述][d1a4e1aa1b684f02af4250dc5c277d2b.png]

#### 4.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.代码准备 ####

<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>
    
    
      <div id="app">
          <div class="contain">
            
            <div class="list-box">
    
              
              <form class="my-form">
                <input type="text" class="form-control" placeholder="消费名称" />
                <input type="text" class="form-control" placeholder="消费价格" />
                <button 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>
                    <td>1</td>
                    <td>帽子</td>
                    <td>99.00</td>
                    <td><a href="javascript:;">删除</a></td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>大衣</td>
                    <td class="red">199.00</td>
                    <td><a href="javascript:;">删除</a></td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="4">消费总计： 298.00</td>
                  </tr>
                </tfoot>
              </table>
            </div>
            
            
            <div class="echarts-box" id="main"></div>
          </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script>
          /**
           * 接口文档地址：
           * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
           * 
           * 功能需求：
           * 1. 基本渲染
           * 2. 添加功能
           * 3. 删除功能
           * 4. 饼图渲染
           */
          const app = new Vue({
          
            el: '#app',
            data: {
          
              
            },
          })
        </script>

[eef47f3050d94e2c9f5050c7a1e74c8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/adb940b5e0314b09b628e9fc3e16d446.png
[c0deb05e104f48dea0fced278fd8400e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/0d4090463b0c4202b201140a45d67792.png
[9b9985c3bac846f6963a829cd33015a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1f848152cefd4b10b542792846387dc8.png
[d1a4e1aa1b684f02af4250dc5c277d2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/bb4418db4b6b4c038f815d9d00e5d1c7.png