Vue的生命周期

1.Vue生命周期的概念

从Vue实例开始创建,然后运行,最后销毁的整个生命过程中,会伴随着各种各样的事件,这些事件统称为Vue的生命周期.
所谓的生命周期函数和生命周期钩子,其实就是生命周期事件.

2.Vue生命周期函数分类

1.创建期间的生命周期函数
beforeCreate(){}
created(){}
beforeMount(){}
mounted(){}
2.运行期间的生命周期函数
beforeUpdate(){}
updated(){}
3.销毁期间的生命周期函数
beforeDestroy(){}
destroyed(){}

3.Vue生命周期图解(对照第四节的代码更容易理解)

Vue 生命周期图解

4.Vue生命周期各阶段对应的代码示例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="修改data中数据" @click="msg='我是修改后的data数据'"><br>
    <span id="span">{{msg}}</span>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    //生成一个Vue实例
    var vm = new Vue({
        el: "#app",
        data: {
            msg: '我是data属性中的一条信息'
        },
        methods: {
            show() {
                console.log('我是methods属性中的show方法')
            }
        },
        /*beforeCreate生命周期函数*/
        beforeCreate() {
            //console.log(this.msg);//undefined
            // this.show()//"TypeError: this.show is not a function"
        },
        /*created生命周期函数*/
        created() {
            console.log(this.msg);//我是data属性中的一条信息
            this.show()//我是methods属性中的show方法
        },
        /*beforeMount生命周期函数*/
        beforeMount() {
            console.log(document.getElementById('span').innerText);//{{msg}}
        },
        /*mounted生命周期函数*/
        mounted(){
            console.log(document.getElementById('span').innerText);//我是data属性中的一条信息
        },
        /*beforeUpdate生命周期函数*/
        beforeUpdate() {
            console.log('页面上DOM数据:'+document.getElementById('span').innerText);//页面上DOM数据:我是data属性中的一条信息
            console.log('data中数据:'+this.msg)//data中数据:我是修改后的data数据
        },
        /*updated生命周期函数*/
        updated() {
            console.log('页面上DOM数据:'+document.getElementById('span').innerText);//页面上DOM数据:我是修改后的data数据
            console.log('data中数据:'+this.msg)//data中数据:我是修改后的data数据
        }
    });
</script>
</body>
</html>

来源：CSDN

作者：狼少年儿

链接：https://blog.csdn.net/weixin_45060806/article/details/104558358

标签

vue