15-生命周期-CSDN博客

本文链接：https://blog.csdn.net/m0_58250910/article/details/132351767

本文详细介绍了Vue组件的生命周期的四个阶段（创建、挂载、更新和卸载），以及每个阶段中的关键钩子函数，如created用于数据准备，mounted用于模板渲染，updated处理数据变化，beforeDestroy用于资源清理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue生命周期和生命周期的四个阶段

Vue生命周期总结:

四个阶段,八个钩子 -> 三个常用 created,mounted,beforeDestroy

生命周期的钩子函数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <div id="app">
        <h3>{{title}}</h3>
        <div>
            <div>
                <button @click="count--">-</button>
                <span>{{count}}</span>
                <button @click="count++">+</button>
            </div>

        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/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() {
                // 可以操作dom了
                console.log("mounted 模板渲染之后",document.querySelector("h3").innerHTML)
            },

            // 3. 更新阶段(修改数据 -> 更新视图)
            beforeUpdate(){
                console.log("beforeUpdare 数据修改了,视图还没更新",document.querySelector('span').innerHTML)
            },
            updated(){
                console.log("updated 数据修改了,视图已经更新",document.querySelector('span').innerHTML)

            },


            // 4. 卸载阶段
            beforeDestroy(){
                console.log("beforeDestroy,卸载前")

                // 清除掉一些Vue以外的资源占有,定时器,延时器...

            },
            destroyed(){
                console.log("destroyed,卸载后")

            }

        })

    </script>


</body>

</html>

created应用

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>
</head>

<body>


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

        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://unpkg.com/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. 发送请求,获取数据
               const res = await axios.get('http://hmajax.itheima.net/api/news')
               // 2. 将数据更新给 data 中的list 
               this.list = res.data.data
            }

           

        })

    </script>


</body>

</html>

mounted应用

mounted: 模板渲染完成,可以开始操作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>
</head>

<body>


    <div id="app">
        
        <div>
            <img>
            <div>
                <input type="text" v-model="words" id="inp">
                <button>搜索一下</button>
            </div>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/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>