Vue.js 生命週期

時間 2020-07-08

標籤 vue.js vue 生命週期欄目 JavaScript 简体版

原文原文鏈接

生命週期示意圖：
css

beforeCreate --> Functionhtml

在實例初始化以後，數據觀測（data observer）和event/watcher 事件配置以前調用vue

created --> Function數組

實例已經建立完成以後被調用，在這一步，實例已經完成如下的配置：服務器

> 數據觀測（data observer）
app

> 屬性和方法運算
ide

> watch/event 事件回調函數

beforeMount --> Functionthis

在掛載開始以前被調用，相關的 render 函數首次被調用spa

該鉤子在服務器端渲染期間不被調用

mounted --> Function

el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

該鉤子在服務器端渲染期間不被調用。

beforeUpdate --> Function

數據更新時調用，發生在虛擬 DOM 從新渲染和打補丁以前。

你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。

該鉤子在服務器端渲染期間不被調用。

updated --> Function

因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。

當這個鉤子被調用時，組件 DOM 已經更新，因此你如今能夠執行依賴於 DOM 的操做。然而在大多數狀況下，你應該避免在此期間更改狀態，由於這可能會致使更新無限循環。

該鉤子在服務器端渲染期間不被調用。

activated --> Function

keep-alive 組件激活時調用。

該鉤子在服務器端渲染期間不被調用。

deactivated --> Function

keep-alive 組件激活時調用。

該鉤子在服務器端渲染期間不被調用。

beforeDestroy --> Function

實例銷燬以前調用。在這一步，實例仍然徹底可用。

該鉤子在服務器端渲染期間不被調用。

destroyed --> Function

Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

該鉤子在服務器端渲染期間不被調用。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
    `msg`
</div>

<script src="//cdn.bootcss.com/vue/2.0.8/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello Vue'
        },
        beforeCreate: function () {
            alert('實例建立以前');
        },
        created: function () {
            alert('實例已經建立');
        },
        beforeMount: function () {
            alert('實例掛載以前');
        },
        mounted: function () {
            alert('實例掛載到根元素 #app上');
        },
        beforeUpdate: function () {
            alert('數據更新以前');
        },
        updated: function () {
            alert('數據更新以後');
        },
        activated: function () {
            alert('keep-alive 組件激活時調用');
        },
        deactivated: function () {
            alert('keep-alive 組件停用時調用');
        },
        beforeDestroy: function () {
            alert('實例銷燬以前調用');
        },
        destroyed: function () {
            alert('實例銷燬以後調用');
        }
    })
</script>
</body>
</html>

監聽數據變化

vm.$watch(expOrFn, callBack, [options])

參數：

expOrFn --> String 或 Function

callBack --> 回調函數

options --> 對象

options取值： deep --> boolean

immediate --> boolean

用法：

觀察 Vue 實例變化的一個表達式或計算屬性函數，回調函數獲得的參數爲新值和舊值，表達式只接受監督的鍵路徑。對於更復雜的表達式，用一個函數取代。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    `a`
    <br>
    `b`
</div>

<script src="//cdn.bootcss.com/vue/2.0.8/vue.js"></script>
<script>
    //建立根實例
    var vm = new Vue({
        el:'#app',
        data:{
            a:123,
            b:321
        }
    });

    //監聽數據變化
    vm.$watch('a',function(){
        alert('數據a 和 數據b 發生變化了');
        this.b = this.a + 100;
    },{deep:true});

    document.onclick=function(){
        vm.a =1;
    }
</script>
</body>
</html>

選項：deep 深度監視

爲了發現對象內部值的變化，能夠在選項參數中指定 deep: true 。注意監聽數組的變更不須要這麼作。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

選項：immediate

在選項參數中指定 immediate: true 將當即以表達式的當前值觸發回調：

vm.$watch('a', callback, {
  immediate: true
})
// 當即以 `a` 的當前值觸發回調

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。