vue的一生【生命周期函数】

最新推荐文章于 2022-09-09 13:48:24 发布

原创最新推荐文章于 2022-09-09 13:48:24 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript

脱蠢攻坚战之vue.js 专栏收录该内容

6 篇文章

订阅专栏

本文通过实例解析Vue.js的生命周期，包括beforeCreate、created、beforeMount、mounted等各个阶段，展示了各阶段中Vue实例的状态。同时，文章探讨了如何在不同生命周期钩子中进行初始化操作、发起请求以及组件销毁等实践应用。最后，作者强调了实践在理解Vue生命周期中的重要性。

前言

生命周期听着并不陌生，但不太会用。。。
所以今天来啃啃这个硬骨头。

开始

vue.js生命周期官方文档：https://cn.vuejs.org/v2/guide/instance.html

生命周期图示：
在这里插入图片描述

这样子看可能还不太理解，来看看实例：

<div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hi,i am test'
            },
            beforeCreate: function () {
                console.group('--------beforeCreate 创建前状态---------')
                console.log("%c%s", "color:red", "el :" + this.$el)
                console.log("%c%s", "color:red", "data :" + this.$data)
                console.log("%c%s", "color:red", "message :" + this.message)
            },
            created: function () {
                console.group('--------created 创建完毕状态---------')
                console.log("%c%s", "color:red", "el :" + this.$el)
                console.log("%c%s", "color:red", "data :" + this.$data)
                console.log("%c%s", "color:red", "message :" + this.message)
            },
            beforeMount: function () {
                console.group('--------beforeMount 挂载前状态---------')
                console.log("%c%s", "color:red", "el :" + this.$el)
                console.log(this.$el)
                console.log("%c%s", "color:red", "data :" + this.$data)
                console.log("%c%s", "color:red", "message :" + this.message)
            },
            mounted: function () {
                console.group('--------mounted 挂载完成状态---------')
                console.log("%c%s", "color:red", "el :" + this.$el)
                console.log(this.$el)
                console.log("%c%s", "color:red", "data :" + this.$data)
                console.log("%c%s", "color:red", "message :" + this.message)
            },
            beforeUpdate: function () {
                console.group('--------beforeUpdate 更新前状态---------')
                console.log("%c%s", "color:red", "el :" + this.$el)
                console.log(this.$el)
                console.log("%c%s", "color:red", "data :" + this.$data)
                console.log("%c%s", "color:red", "message :" + this.message)
            },
            updated: function () {
                console.group('--------updated 完成更新状态---------')
                console.log("%c%s", "color:red", "el :" + this.$el)
                console.log(this.$el)
                console.log("%c%s", "color:red", "data :" + this.$data)
                console.log("%c%s", "color:red", "message :" + this.message)
            },
            beforeDestroy: function () {
                console.group('--------beforeDestroy 销毁前状态---------')
                console.log("%c%s", "color:red", "el :" + this.$el)
                console.log(this.$el)
                console.log("%c%s", "color:red", "data :" + this.$data)
                console.log("%c%s", "color:red", "message :" + this.message)
            },
            destroyed: function () {
                console.group('--------destroyed 销毁完成状态---------')
                console.log("%c%s", "color:red", "el :" + this.$el)
                console.log(this.$el)
                console.log("%c%s", "color:red", "data :" + this.$data)
                console.log("%c%s", "color:red", "message :" + this.message)
            }
        })
    </script>