<span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
<sub id="h9j9p"><listing id="h9j9p"></listing></sub>

    <noframes id="h9j9p"><form id="h9j9p"></form>
    <form id="h9j9p"></form>
      <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

      <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>
        400-650-7353

        精品課程

        您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】Vue中的生命周期

        【Web前端基礎知識】Vue中的生命周期

        • 發布: Web前端培訓
        • 來源:
        • 2021-08-30 16:59:26
        • 閱讀()
        • 分享
        • 手機端入口

        以下主要從幾個方面來講:

        1.vue的生命周期是什么

        2.vue生命周期的在項目中的執行順序

        3.vue中內置的方法 屬性和vue生命周期的運行順序(methods、computed、data、watch)

        一、vue的生命周期是什么

        vue每個組件都是獨立的,每個組件都有一個屬于它的生命周期,從一個組件創建、數據初始化、掛載、更新、銷毀,這就是一個組件所謂的生命周期。在組件中具體的方法有:

        1. beforeCreate 
        2.   created 
        3.   beforeMount 
        4.   mounted 
        5.   ( 
        6.       beforeUpdate 
        7.       updated 
        8.   ) 
        9.   beforeDestroy 
        10.   destroyed 

        對應的中文就如其字面意思,英文不好的童鞋可以有道翻翻

        好了,這里要上圖啦~~~

        二、vue生命周期的在項目中的執行順序

        ...

        data () {

        return {

        rendered: false,

        }

        }

        ...

        1.beforeCeate(){

        console.log(this.rendered); // undefined

        }

        2.created() {

        console.log(this.$el);//undefined

        console.log(this.rendered); // false

        }

        3.beforeMount() {

        console.log(this.$el);//undefined

        }

        4.mounted() {

        console.log(this.$el);

        }

        5.beforeDestroy(){

        console.log(this.$el);

        console.log(this.rendered);

        }

        6.destroyed() {

        console.log(this.$el);

        console.log(this.rendered);

        }

        三、vue中內置的方法 屬性和vue生命周期的運行順序(methods、computed、data、watch、props)

        從第一二點可知道data的初始化是在created時已經完成數據觀測(data observer),并且諸如methods、computed屬性 props等已經初始化;那問題來了,

        data props computed watch methods他們之間的生成順序是什么呢?

        props => methods =>data => computed => watch;

        學習疑問申請解答
        您的姓名
        您的電話
        意向課程
         

        中公優就業

        IT小助手

        掃描上方二維碼添加好友,請備注:599,享學習福利。

        >>本文地址:
        注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

        推薦閱讀

        優就業:ujiuye

        關注中公優就業官方微信

        • 關注微信回復關鍵詞“大禮包”,享學習福利
        QQ交流群
        在線疑問解答
        (加群備注“網站”)
        IT培訓交流群 加入群聊 +
        軟件測試 加入群聊 +
        全鏈路UI/UE設計 加入群聊 +
        Python+人工智能 加入群聊 +
        互聯網營銷 加入群聊 +
        Java開發 加入群聊 +
        PHP開發 加入群聊 +
        VR/AR游戲開發 加入群聊 +
        大前端 加入群聊 +
        大數據 加入群聊 +
        Linux云計算 加入群聊 +
        優就業官方微信
        掃碼回復關鍵詞“大禮包”
        享學習福利

        測一測
        你適合學哪門IT技術?

        1 您的年齡

        2 您的學歷

        3 您更想做哪個方向的工作?

        獲取測試結果
         
        課程資料、活動優惠 領取通道
         
         
        亚洲日韩中文字幕一区
        <span id="h9j9p"><th id="h9j9p"><th id="h9j9p"></th></th></span>
        <sub id="h9j9p"><listing id="h9j9p"></listing></sub>

          <noframes id="h9j9p"><form id="h9j9p"></form>
          <form id="h9j9p"></form>
            <sub id="h9j9p"><dfn id="h9j9p"><menuitem id="h9j9p"></menuitem></dfn></sub>

            <form id="h9j9p"><nobr id="h9j9p"><meter id="h9j9p"></meter></nobr></form>