vue的生命周期

最新推荐文章于 2025-05-01 08:38:22 发布

学好Java就改名

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量161

点赞数 1

分类专栏：笔记文章标签： vue javascript html

本文链接：https://blog.youkuaiyun.com/duhaoyu110/article/details/114995465

版权

笔记专栏收录该内容

16 篇文章

订阅专栏

在vue中，生命周期是非常重要内容。vue的生命周期总的来说，可分成三个阶段。在不同的阶段所执行的钩子函数是不同的。所谓钩子函数就是vue内部在进行vue对象的初始化创建，运行，以及销毁阶段的自动执行的函数，不同的函数代表着不一样的意义。

在这里插入图片描述

上图是vue官方给出的生命周期图，把vue的生命周期分成了三个阶段，共八个钩子函数。下面我们分别来看钩子函数的作用。

初始化阶段

初始化阶段共四个钩子函数beforeCreate()，created()，beforeMount()， mounted()

// 第一个执行生命周期函数，在这个函数执行的时候vue实例仅仅完成内部事件的初始化，以及生命周期方法的初始化
beforeCreate(){},
// 第二个生命周期执行的函数，在这个函数执行的时候已经完成自定义的data，methods等的初始化以及语法校验
created(){},
// 第三个生命周期的执行函数，在这个函数执行的时候仅仅是将el属性指向的html编译成模板，并没有完成页面的渲染
beforeMount(){},
// 第四个生命周期执行的函数，在这个函数执行的时候会将data的数据渲染到模板上并形成虚拟dom
mounted(){}

运行阶段

运行阶段共两个钩子函数 beforeUpdate()，updated()

// 第五个运行阶段执行的函数，如果data中的数据发生改变会触发该函数，只是改变了data中的数据，但是页面中的数据还没有改变
 beforeUpdate(){},
// 第六个运行阶段执行到该函数时，vue实例中的data数据和页面已经保存一致了
updated(){},

销毁阶段

销毁阶段共两个钩子函数 beforeDestroy(),destroy()，这两个方法并不会自动调用只有调用vue对象的delete方法才会调用

// 第七个执行的函数，vue实例仅仅是刚刚开始销毁data methods ...数据还可以拿到
beforeDestroy(){           
},
// 第八个执行的函数，vue实例的所有events，child component(子组件),事件监听都被销毁了...
destroy(){}

测试用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h1 id="sp">{{msg}}</h1>
<!--
    vue生命周期：
        1.初始化阶段
            beforeCreate()，created()，beforeMount()， mounted()
        2.运行阶段
            beforeUpdate，updated
        3.销毁阶段
            beforeDestroy,destroy
-->
    <input type="button" @click="changeData" value="改变数据" />
</div>
</body>
</html>
<script src="js/vue2.5.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:"vue生命周期"
        },
        methods:{
            changeData(){
                this.msg = "vue 生命周期2";
            }
        },
        // 第一个执行生命周期函数，在这个函数执行的时候vue实例仅仅完成内部事件的初始化，以及生命周期方法的初始化
        beforeCreate(){
            console.log(this.msg);
        },
        // 第二个生命周期执行的函数，在这个函数执行的时候已经完成自定义的data，methods等的初始化以及语法校验
        created(){
            console.log(this.msg);
        },
        // 第三个生命周期的执行函数，在这个函数执行的时候仅仅是将el属性指向的html编译成模板，并没有完成页面的渲染
        beforeMount(){
            console.log(document.getElementById("sp").innerText);
        },
        // 第四个生命周期执行的函数，在这个函数执行的时候会将data的数据渲染到模板上并形成虚拟dom
        mounted(){
            console.log(document.getElementById("sp").innerText);
        },
        // 第五个运行阶段执行的函数，如果data中的数据发生改变会触发该函数，只是改变了data中的数据，但是页面中的数据还没有改变
        beforeUpdate(){
            console.log("beforeUpdate");
            console.log(document.getElementById("sp").innerText);
        },
        // 第六个运行阶段执行到该函数时，vue实例中的data数据和页面已经保存一致了
        updated(){
            console.log("updated");
            console.log(document.getElementById("sp").innerText);
        },
        // 第七个执行的函数，vue实例仅仅是刚刚开始销毁data methods ...数据还可以拿到
        beforeDestroy(){
            console.log("beforeDestroy" + this.msg);
        },
        // 第八个执行的函数，vue实例的所有events，child component(子组件),事件监听都被销毁了...
        destroy(){

        }
    })
</script>