测试vue生命周期（通俗易懂）-CSDN博客

本文链接：https://blog.csdn.net/ls_csdn273266198/article/details/118092815

1、什么是vue生命周期？

vue实例从生到死的过程，每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

2、官方提供的vue生命周期图解中英文版

在这里插入图片描述

3、上图中提供了8个钩子函数

1、钩子函数指vue到某种状态时执行的对应的函数。
		比如你设置了早上八点的闹铃，当时间到达了8点，闹铃就会响，钩子函数就相当于闹铃
2、提供了哪8个钩子函数
	1、beforeCreate    		创建前
	2、created					创建后
	3、beforeMount   		载入前
	4、mounted				载入后
	5、beforeUpdate   		更新前
	6、updated					更新后
	7、beforeDestroy   		销毁前
	8、destroyed     			销毁后

4、测试

1、测试beforeCreate和created

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            name:"张三"
        },
        methods: {
            test(){
                console.log("test方法执行了")
            }
        },

        beforeCreate () {
           console.log("创建之前") 
           console.log(this.$el,this.name)
           this.test();
        },
        created () {
            console.log("创建之后")
            console.log(this.$el,this.name)
            this.test()
        }
    })
</script>

2、测试beforeMount和mounted

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            name:"张三"
        },
        methods: {
            test(){
                console.log("test方法执行了")
            }
        },

        beforeMount () {
           console.log("加载之前") 
           console.log(this.$el)
           console.log(this.name)
           this.test();
        },
        mounted () {
            console.log("加载之后")
            console.log(this.$el)
            console.log(this.name)
            this.test()
        }
    })
</script>

3、当看到这里说明上面的都测试过了，最后四个自行测试