vue——生命周期图解

最新推荐文章于 2023-02-15 21:35:35 发布

ftToday

最新推荐文章于 2023-02-15 21:35:35 发布

阅读量148

点赞数 2

分类专栏：前端文章标签： vue生命周期 vue生命周期详解 vue生命周期各函数 vue生命周期说明 VUE生命周期

本文链接：https://blog.csdn.net/longlc123/article/details/115762268

版权

前端专栏收录该内容

125 篇文章 3 订阅

订阅专栏

在这里插入图片描述

在这里插入图片描述
2、 vue 生命周期图

生命周期图示:
https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

生命周期钩子:
https://cn.vuejs.org/v2/api/#选项-生命周期钩子

生命周期个函数

<!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>