Vue的生命週期一起來看看

2022-02-24 22:00:25

1. 生命週期（重要）

1.1 初步認識生命週期

別名：生命週期回撥函數、生命週期函數、生命週期勾點。
生命週期是什麼？Vue在關鍵時刻幫我們呼叫的一些特殊名稱的函數。
生命週期函數的名字不可更改，但函數內部的具體內容由程式設計師自行編寫
生命週期函數中的this指向也是vm 或元件範例物件。

1.2 生命週期流程（8個）

1.初始化

1.beforeCreate()

2.created()

2.掛載（頁面渲染）

1.beforeMount()

2.mounted()

3.更新

1.beforeUpdate()

2.updated()

4.銷燬

1.beforeDestory()

2.destoryed()

1.3 生命週期詳細流程圖

1.4 常用的生命週期勾點：

beforeCreate():可以設定全域性事件匯流排，後面會講到先提一嘴

mounted(): 可以在此階段傳送ajax請求, 啟動定時器、繫結自定義事件、訂閱訊息等非同步任務【初始化操作】

beforeDestroy(): 在此階段做收尾工作, 如: 清除定時器、解綁自定義事件、取消訂閱訊息等【首尾工作】

1.4.1 關於銷燬

銷燬後藉助Vue開發者工具看不到任何資訊
銷燬後自定義事件會失效，但原生DOM事件依然有效
一般不會在beforeDestroy運算元據，因為即使運算元據，也不會再觸發更新流程了。

1.4.2 關於父子元件的生命週期

1.載入渲染的過程

父beforeCreate ==> 父created ==> 父beforeMount ==> 子beforeCreate ==> 子created ==> 子beforeMount ==> 子mounted ==> 父mounted

2.更新的過程

父beforeUpdate ==> 子beforeUpdate ==> 子updated ==> 父updated

3.銷燬過程

父beforeDestroy ==> 子beforeDestroy ==> 子destroyed ==> 父destroyed

1.5小案例

 <div id="root">
        <!-- 讓h3透明度產生過渡的效果 -->
        <h3 :style="{opacity:opacity}">歡迎學習Vue!</h3>
        <button @click="des">點選我銷燬</button>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {  
                des(){
                    // 觸發此函數必定呼叫，beforeDestroy()，destroyed()
                    this.$destroy()
                }
            },
            mounted() { //掛載
                /*
                		- 完成模板解析後並且將初始的真實的DOM元素掛載到頁面後，才執行的函數
                			只會執行一次
                		- this指向Vue
                		- 開發中常用的方法，當我們想要讀取某個屬性但是讀不到，就可以
                		  將該屬性繫結到共同能夠存取到的元素上，例如下面定時器的例子
                */
                this.timer = setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0)
                        this.opacity = 1
                }, 10);
            },
            beforeDestroy() {
                console.log("beforeDestroy - 清除定時器");
                clearInterval(this.timer)
            },
            destroyed() {
                console.log("destroyed - 銷燬完畢")
            },
        })
    </script>

1.6 程式碼舉例說明生命週期勾點

  <div id="root">
        <h3>n的值為：{{n}}</h3>
        <button @click="add">點選我n+1</button>
        <button @click="remove">點選銷燬vm</button>
    </div>
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#root',
            data: {
                n:1
            },
            methods: {
                add(){
                    this.n++
                },
                remove(){
                    this.$destroy()
                }
            },
            beforeCreate() {
                /* 
                    此時初始化生命週期，事件等，資料代理還未開始
                    vm無法存取到data中的資料，methods中的方法
                */
                console.log("beforeCreate");
                //console.log(this.n);  //undefined
                // console.log(this.add()); // this.add is not a function
                // debugger
            },
            created() {
                /* 
                    已經完成了初始化的資料監視和資料代理
                    vm可以存取到data中的資料和methods的方法
                */
                console.log("created");
                // console.log(this.n);  // 1
                // console.log(this.add());  // undefined
                // debugger
            },
            beforeMount() {
                /*
                    掛載之前，也就是圖中的判斷框裡執行的，此階段是Vue
                    在解析模板並且生成虛擬DOM儲存在記憶體當中，頁面還不能
                    看到解析後的樣子
                 */
                 console.log("beforeMount");
                //  debugger
            },
            mounted() {
                /* 
                    完成模板解析後並且將初始的真實的DOM元素掛載到頁面後，才執行的函數
                    一般在此：開啟一些定時器、傳送網路請求、訂閱訊息、
                    繫結自定義事件等等初始化
                 */
                console.log("mounted");
                // debugger
            },
            beforeUpdate() {
                /* 
                    當資料發生更新後，此時資料已經更新完成，但是頁面
                    還是未更新的。
                    也就是面試所問的：頁面和尚未和資料保持同步的階段
                 */
                console.log("beforeUpdate");
            },
            updated() {
                /* 
                    在這之前會進行新舊虛擬DOM比較，最終完成頁面的更新
                    此階段就是頁面和資料保持同步
                 */
                 console.log("updated");
            },
            beforeDestroy() {
                /* 
                    當我們呼叫vm.$destroy時，才會執行下面兩個函數，
                    馬上要執行銷燬階段，一般在這個階段做一些收尾操作
                    比如：關掉定時器，取消訂閱，解綁自定義事件
                 */
                console.log("beforeDestroy");
            },
            destroyed() {
                /*
                    所有的指令,所有的自定義事件監聽器都沒了（只留下原生的dom的事件）
                 */
                console.log("destroyed");
            },
        })
    </script>