如何理解Vue的生命周期函数(生命周期钩子)

理解Vue生命周期的概念有助于我们在不同阶段执行不同的程序和操作。

Vue的生命周期图示
<body>
    <div id="app">{{msg}}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'hello world!',
            },
            methods: {
                changeMsg() {
                    this.msg = 'hello VUE!';
                }
            },
            beforeCreate() { //vue实例仅仅完成了自身事件的绑定和初始化,el\data\methods等属性并没有载入
                console.log('beforeCreate:' + this.msg); //undefined
            },
            created() { //vue实例完成了data\methods属性的载入,此时el属性并没有被挂载
                console.log('created:' + this.msg); //hello world!
                console.log(document.querySelector("#app").innerHTML); //{{msg}}
            },
            beforMount() { //此时将el属性指定的作用范围作为模板编译
                console.log(document.querySelector("#app").innerHTML); //{{msg}}
            },
            mounted() { //此时已经将数据渲染到界面并已经更新了页面
                console.log(document.querySelector("#app").innerHTML); //hello world!
            },
            beforeUpdate() { //该函数在vue实例data的数据发生变化时执行,此时页面中的数据并没有更新
                console.log(this.msg); //hello VUE!
                console.log(document.querySelector("#app").innerHTML); //hello world!
            },
            updated() { //该函数执行时vue实例中data的数据发生变化,页面中的数据也更新了,实例跟页面中的数据保持一致
                console.log(this.msg); //hello VUE!
                console.log(document.querySelector("#app").innerHTML); //hello VUE!            
            },
            beforeDistroy() { //该函数执行时,vue中所有数据data,methods,componets等都尚未销毁
            },
            distroyed() { //该函数执行时,vue实例彻底销毁
            }
        })
    </script>
</body>

比如,通过axios请求到数据放在created函数中比放在mounted函数中更合适。

来自B站up主编程不良人的VUE课程

发表评论

电子邮件地址不会被公开。 必填项已用*标注