学习笔记——Vue的生命周期和生命周期的四个阶段

最新推荐文章于 2024-08-08 09:59:50 发布

NHuan^_^

最新推荐文章于 2024-08-08 09:59:50 发布

阅读量927

点赞数 24

文章标签： vue.js 学习笔记

本文链接：https://blog.csdn.net/2301_80093566/article/details/140443920

版权

文章目录

Vue生命周期

Vue生命周期

1.介绍

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

2.生命周期四个阶段（创建、挂载、更新、销毁）

创建阶段：创建响应式数据，包括 Vue 实例初始化的过程，包括数据观测和事件配置。
挂载阶段：渲染模板，即将模板编译并挂载到实际的 DOM 上的过程。
更新阶段：修改数据，更新视图。即数据变化引起的 DOM 重新渲染过程。
销毁阶段：销毁Vue实例。即实例从 DOM 中解除绑定并清理所有事件监听和子实例的过程。

3.Vue生命周期钩子

在Vue的生命周期中，每个阶段都有特定的钩子函数，我们可以在不同的时机执行代码，从而更好地控制组件的行为。这些钩子函数能使我们在实例的不同生命周期阶段中执行特定的逻辑，例如初始化数据、操作 DOM、响应数据变化和清理资源等。

（1）创建阶段

这个阶段包含两个钩子函数：

beforeCreate：实例初始化之后调用，此时数据观测和事件配置还没有完成，所以无法访问 data、methods 等属性。
created：实例创建完成后调用，此时可以访问 data、methods 等属性，但 DOM 还没有生成。

（2）挂载阶段

这个阶段也包含两个钩子函数：

beforeMount：在挂载开始之前调用，模板已经编译，但还没有挂载到 DOM 上。
mounted：在挂载完成后调用，此时 DOM 已经生成，可以进行 DOM 操作。

（3）更新阶段

这个阶段包含两个钩子函数：

beforeUpdate：在数据变化导致的重新渲染开始之前调用，可以在这里访问旧的 DOM 状态。
updated：在重新渲染完成后调用，此时 DOM 已经根据最新的数据更新。

（4）销毁阶段

这个阶段包含两个钩子函数：

beforeDestroy：在实例销毁之前调用，可以在这里执行一些清理操作，比如取消定时器或解绑事件。
destroyed：在实例销毁之后调用，此时实例已经解除绑定，所有事件监听和子实例都已清理。

4.created示例

需求：一进入页面，立刻发送请求，获取新闻数据，并渲染到页面中。

分析：需要访问 data、methods 等属性，而不需要操作DOM，就在实例创建完成后调用created。

代码

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

  <head>
    <meta charset="UTF-8">
    <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 v-for="(item, index) in list" :key="id" class="news">
          <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="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>
      // 接口地址：http://hmajax.itheima.net/api/news
      // 请求方式：get
      const app = new Vue({
        el: '#app',
        data: {
          list: []
        },
        async created() {
          // 1.发送ajax请求，获取数据
          const res = await axios.get('http://hmajax.itheima.net/api/news')
          console.log(res)
          // 2.将数据赋值给list
          this.list = res.data.data
        }
      })
    </script>

  </body>

</html>

5.mounted示例

需求：一进入页面，立即获得搜索框的焦点（操作DOM）。

分析：要操作DOM，就只有在挂载完成后调用mounted，此时 DOM 已经生成，可以进行 DOM 操作。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

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