9 Vue - 生命周期

1 生命周期解释

  • 初始化阶段：

beforeCreate(){//执行该函数时，Vue实例仅仅完成了生命周期的初始化,Vue实例中还没有el、data、methods相关属性
    console.log("beforeCreate: " + this.msg);
},
created(){//该函数在执行时，Vue实例已经初始化了data属性和methods中的方法
    console.log("created: " + this.msg);
    // 用途：此时可以进行后台列表请求，赋值给data中的list
},
beforeMount(){//执行该函数时，Vue将el中指定的作用范围作为模板进行编译,{{msg}}此内容还没有被替换
    console.log("beforeMount: " + document.getElementById("msg").innerText);
},
mounted(){//执行该函数时，已经将msg数据渲染到页面中并更新页面,至此，Vue初始化完毕！！！！！！
    console.log("Mounted: " + document.getElementById("msg").innerText);
},
  • 运行阶段：
beforeUpdate() {//该函数是在data中的数据发生变化时执行的,这个函数执行时，仅仅是Vue实例中的data变化,页面显示的依然是原来的数据
    console.log("beforeUpdate: " + this.msg);
    console.log("beforeUpdate: " + document.getElementById("msg").innerText);
},
updated() {//该函数执行时，页面中的数据已经和data中的数据一致
    console.log("update: " + this.msg);
    console.log("update: " + document.getElementById("msg").innerText);
},
  • 销毁阶段
beforeDestroy() {//该函数执行时,Vue中的所有data、methods都没有销毁。不常用
},
destroyed() {//该函数执行时,Vue实例彻底销毁。不常用
},
  • 生命周期图

2 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <!-- 关联数据 （响应式）-->
        <span id="msg">{{ msg }}</span>
        <input type="button" @click="changeMsg" value="修改数据">
    </div>

    <script>
        var app = new Vue({     // 创建 Vue 应用
            el: '#app',         // 挂载点，挂载元素
            data: {             // 数据（响应式）
                msg: 'Hello lizi!'
            },
            methods:{
                changeMsg() {
                    this.msg = "我是新的msg！"
                }
            },
            beforeCreate(){
                console.log("beforeCreate: " + this.msg);
            },
            created(){
                console.log("created: " + this.msg);
            },
            beforeMount(){
                console.log("beforeMount: " + document.getElementById("msg").innerText);
            },
            mounted(){
                console.log("Mounted: " + document.getElementById("msg").innerText);
            },
            beforeUpdate() {
                console.log("beforeUpdate: " + this.msg);
                console.log("beforeUpdate: " + document.getElementById("msg").innerText);
            },
            updated() {
                console.log("update: " + this.msg);
                console.log("update: " + document.getElementById("msg").innerText);
            },
            beforeDestroy() {
            },
            destroyed() {
            },
        })
    </script>
</body>
</html>

 

posted @ 2021-04-23 23:34  栗子测试开发  阅读(99)  评论(0)    收藏  举报