生命週期鉤子

時間  2019-11-16
標籤 生命週期 鉤子 简体版
原文   原文鏈接

　　全部的生命週期鉤子自動綁定 this 上下文到實例中，所以你能夠訪問數據，對屬性和方法進行運算。這意味着你不能使用箭頭函數來定義一個生命週期方法 (例如 created: () => this.fetchTodos())。這是由於箭頭函數綁定了父上下文，所以 this 與你期待的 Vue 實例不一樣，this.fetchTodos 的行爲未定義。javascript

1、建立示例試驗鉤子函數

<body>
    <div id="app">
        <App></App>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        // 在Test組件中試驗鉤子函數
        var Test = {
            data(){
                return {
                    msg:"啊哈哈"
                }
            },
            template:`
                <div>
                    <div>{{msg}}</div>
                    <button @click="changeHandler">修改</button>
                </div>
            `,
            methods:{
                changeHandler(){
                    this.msg = this.msg + 'alex';
                }
            },
            beforeCreate(){   // 在當前組件建立以前調用
                console.log(this.msg);   // 輸出undefined，說明當前數據爲空
            },
            created(){        // 在當前組件建立以後調用
                // 使用該組件就會觸發以上的鉤子函數，created中能夠操做數據、發送ajax，
                // 而且能夠實現vue對頁面的影響，應用主要是：發送Ajax請求
                console.log(this.msg);  // 控制檯輸出"啊哈哈"
                // this.msg="嘿嘿嘿";
            },
            beforeMount(){   // 裝載數據到DOM以前會調用
                console.log(document.getElementById('app'));
            },
            mounted(){   // 裝載數據到DOM以後會調用
                // 這個地方能夠操做DOM
                // 能夠獲取到真實存在的DOM元素，vue操做之後的DOM
                console.log(document.getElementById('app'));
            },
            beforeUpdate(){  // 更新以前，調用此鉤子，應用：獲取原始的DOM
                console.log(document.getElementById('app').innerHTML);   // 獲取全部元素
            },
            updated(){        // 更新以後，調用此鉤子，應用：獲取最新的DOM
                console.log(document.getElementById('app').innerHTML);   // 獲取全部元素
            },
            beforeDestroy(){
                console.log('beforeDestroy');
            },
            destroyed(){
                console.log('destroyed');
            },
            activated(){
                console.log('組件被激活了');
            },
            deactivated(){
                console.log('組件被停用了');
            }
        };

        var App = {   // 局部組件
            data(){
                return {
                    isShow:true
                }
            },
            template:`
                <div>
                    <keep-alive>
                        <Test v-if="isShow"></Test>
                    </keep-alive>
                    <button @click="changeHandler">改變組件的生死</button>
                </div>
            `,
            methods:{
                changeHandler(){
                    this.isShow = !this.isShow;
                }
            },
            components:{  // 掛載Test組件
                Test
            }
        };

        // 建立 銷燬
        new Vue({
            el:'#app',
            template:``,
            components:{
                App
            }
        });
    </script>
</body>

 

2、各個鉤子函數介紹

一、beforeCreate與created

　　beforeCreate：在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。vue

　　created：在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。java

template:`
    <div>
        {{msg}}
    </div>
`,
beforeCreate(){   // 在當前組件建立以前調用
    console.log(this.msg);   // 輸出undefined，說明當前數據爲空
},
created(){        // 在當前組件建立以後調用
    // 使用該組件就會觸發以上的鉤子函數，created中能夠操做數據、發送ajax，
    // 而且能夠實現vue對頁面的影響，應用主要是：發送Ajax請求
    console.log(this.msg);  // 控制檯輸出"啊哈哈"
    this.msg="嘿嘿嘿";
},

　　顯示效果以下所示：ajax

　　

二、beforeMount與mounted

　　beforeMount：在掛載開始之前被調用：相關的 render 函數首次被調用。該鉤子在服務器端渲染期間不被調用。api

　　mounted：el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。該鉤子在服務器端渲染期間不被調用。緩存

template:`
    <div>
        {{msg}}
    </div>
`,

beforeMount(){   // 裝載數據到DOM以前會調用
    console.log(document.getElementById('app'));
},
mounted(){   // 裝載數據到DOM以後會調用
    // 這個地方能夠操做DOM
    // 能夠獲取到真實存在的DOM元素，vue操做之後的DOM
    console.log(document.getElementById('app'));
},

　　顯示效果以下：服務器

　　

三、beforeUpdate與updated

　　beforeUpdate：數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。該鉤子在服務器端渲染期間不被調用，由於只有初次渲染會在服務端進行。app

　　updated：因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態。若是要相應狀態改變，一般最好使用計算屬性或 watcher 取而代之。該鉤子在服務器端渲染期間不被調用。dom

var Test = {    // 在Test組件中試驗鉤子函數
    data(){
        return {
            msg:"啊哈哈"
        }
    },
    template:`
        <div>
            <div>{{msg}}</div>
            <button @click="changeHandler">修改</button>
        </div>
    `,
    methods:{
        changeHandler(){
            this.msg = this.msg + 'alex';
        }
    },

    beforeUpdate(){  // 更新以前，調用此鉤子，應用：獲取原始的DOM
        console.log(document.getElementById('app').innerHTML);   // 獲取全部元素
    },
    updated(){       // 更新以後，調用此鉤子，應用：獲取最新的DOM
        console.log(document.getElementById('app').innerHTML);   // 獲取全部元素
    },

};

　　點擊按鈕後顯示效果以下所示：函數

　　

　　第一個是獲取了更新以前原始div下面全部dom對象。

　　第二個是更新以後新div下面全部的dom對象。

四、beforeDestroy與destroyed

　　beforeDestroy：Vue 實例銷燬以前調用。在這一步，實例仍然徹底可用。該鉤子在服務器端渲染期間不被調用。

　　destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

var Test = {    // 在Test組件中試驗鉤子函數
    data(){
        return {
            msg:"啊哈哈"
        }
    },
    template:`
        <div>
            <div>{{msg}}</div>
            <button @click="changeHandler">修改</button>
        </div>
    `,
    methods:{
        changeHandler(){
            this.msg = this.msg + 'alex';
        }
    },
    beforeDestroy(){
        console.log('beforeDestroy');
    },
    destroyed(){
        console.log('destroyed');
    },
};

var App = {
    data(){
        return {
            isShow:true
        }
    },
    template:`
        <div>
            <Test v-if="isShow"></Test>
            <button @click="changeHandler">改變組件的生死</button>
        </div>
    `,
    methods:{
        changeHandler(){
            this.isShow = !this.isShow;
        }
    },
    components:{  // 掛載Test組件
        Test
    }
};

　　顯示效果以下所示：

　　

　　點擊按鈕（改變組件生死）後，將div標籤內容刪除，顯示以下：

　　

　　組件的銷燬和建立是對網頁中的DOM是有性能消耗的，通常仍是使用下面的激活/停用。

五、activated與deactivated

　　activated：keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。

　　deactivated：keep-alive 組件停用時調用。該鉤子在服務器端渲染期間不被調用。

var Test = {    // 在Test組件中試驗鉤子函數
    data(){
        return {
            msg:"啊哈哈"
        }
    },
    template:`
        <div>
            <div>{{msg}}</div>
            <button @click="changeHandler">修改</button>
        </div>
    `,
    methods:{
        changeHandler(){
            this.msg = this.msg + 'alex';
        }
    },
    activated(){
        console.log('組件被激活了');
    },
    deactivated(){
        console.log('組件被停用了');
    }
};

var App = {
    data(){
        return {
            isShow:true
        }
    },
    template:`
        <div>
            <keep-alive>
                <Test v-if="isShow"></Test>
            </keep-alive>
            <button @click="changeHandler">改變組件的生死</button>
        </div>
    `,
    methods:{
        changeHandler(){
            this.isShow = !this.isShow;
        }
    },
    components:{  // 掛載Test組件
        Test
    }
};

　　keep-alive組件：用於讓當前組件產生緩存。

　　組件的停用和激活只是和緩存有關，與生命週期沒有關係。

　　點擊按鈕顯示效果以下：

　　

　　再次點擊組件被停用，但dom並不發生修改：

　　

六、errorCaptured

　　當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子能夠返回 false以阻止該錯誤繼續向上傳播。

　　參見：https://cn.vuejs.org/v2/api/#選項-生命週期鉤子

3、生命週期圖示

　　

　　組件的停用和激活只是和緩存有關，與生命週期沒有關係。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程