你真的了解vue生命周期嗎

title

vue聲明周期,在每個(gè)聲明周期中都干了些什么?

1, vue的生命周期

  • beforeCreate: 組件實(shí)例剛剛被創(chuàng)建,組件屬性計(jì)算之前,如data屬性
  • created: 組件實(shí)例創(chuàng)建完成,屬性已綁定,但是DOM還未完成,$el屬性還不存在
  • beforeMount:模板編譯/掛載之前
  • mounted: 模板編譯/掛載之后
  • beforeUpdate: 組件更新之前
  • updated: 組件更新之后
  • activated: for keep-alive,組件被激活時(shí)調(diào)用
  • deactivated: for keep-alive,組件被移除時(shí)調(diào)用
  • beforeDestroy: 組件銷(xiāo)毀前被調(diào)用
  • destoryed: 組件銷(xiāo)毀后調(diào)用

ps:下面代碼可以直接復(fù)制出去執(zhí)行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<body>
    <div id="app">{{a}}</div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a: 'vuejs',
            },
            beforeCreate: function() {
                console.log('創(chuàng)建前');
                console.log(this.a);
                console.log(this.$el);
            },
            created: function() {
                console.log('創(chuàng)建之后');
                console.log(this.a);
                console.log(this.$el);
            },
            beforeMount: function() {
                console.log('mount之前');
                console.log(this.a);
                console.log(this.$el);
            },
            mounted: function() {
                console.log('mount之后');
                console.log(this.a);
                console.log(this.$el);
            },
            beforeUpdate: function() {
                console.log('更新之前');
                console.log(this.a);
                console.log(this.$el);
            },
            updated: function() {
                console.log('更新完成');
                console.log(this.a);
                console.log(this.$el);
            },
            beforeDestroy: function() {
                console.log('組件銷(xiāo)毀之前');
                console.log(this.a);
                console.log(this.$el);
            },
            destroyed: function() {
                console.log('組件銷(xiāo)毀之后');
                console.log(this.a);
                console.log(this.$el);
            },
        })
    </script>
</body>
</html>

beforeCreated: el和data并未初始化
created: 完成data數(shù)據(jù)的初始化,el沒(méi)有
beforeMount: 完成了el和data初始化
mounted: 完成掛載

title
打開(kāi)命令行在命令行中輸入vm.a = 'change';查看效果
title

activateddeactivated這兩個(gè)生命周期函數(shù)涉及到<keep-alive>這個(gè)組件,所以想了解這個(gè)生命周期函數(shù)的可以看一下我的另一篇文章
aboutme
github
blog

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容