vue生命週期詳解

最近在寫業務的時候，總是會遇到一些和vue的生命週期相關的問題，比如：你用ajax請求資料，然後將資料props到子元件的時候，因為ajax是非同步的，然後會發生沒有資料。然後查詢原因還是自己對這個東西理解不夠深入。

什麼是生命週期函式？

比如：

mounted: function() 
// 或者
mounted() 
複製**

錯誤的形式：

mounted:() => 
複製**

在例項初始化之後，資料觀測和暴露了一些有用的例項屬性與方法。

例項初始化——new vue()

資料觀測——在vue的響應式系統中加入data物件中所有資料，這邊涉及到vue的雙向繫結，可以看官方文件上的這篇深度響應式原理深度響應式原理

暴露屬性和方法——就是vue例項自帶的一些屬性和方法，我們可以看乙個官網的例子，例子中帶$的屬性和方法就是vue例項自帶的，可以和使用者定義的區分開來

var data = 
var vm = new vue()
vm.$data === data // => true
vm.$el === document.getelementbyid('example') // => true
// $watch 是乙個例項方法
vm.$watch('a', function (newvalue, oldvalue) )
複製**

// 有el屬性的情況下
new vue(,
created: function() ,
beforemount: function() ,
mounted: function() 
})// 輸出結果
// 呼叫了beforecreate
// 呼叫了created
// 呼叫了beforemount
// 呼叫了mounted
複製**

// 在沒有el屬性的情況下，沒有vm.$mount
new vue(,
created: function() ,
beforemount: function() ,
mounted: function() 
})// 輸出結果
// 呼叫了beforecreate
// 呼叫了created
複製**

// 在沒有el屬性的情況下，但是有vm.$mount方法
var vm = new vue(,
created: function() ,
beforemount: function() ,
mounted: function() 
})// 輸出結果
// 呼叫了beforecreate
// 呼叫了created
// 呼叫了beforemount
// 呼叫了mounted
複製**

這裡面分三種情況：

1、在例項內部有template屬性的時候，直接用內部的，然後呼叫render函式去渲染。 2、在例項內部沒有找到template，就呼叫外部的html。例項內部的template屬性比外部的優先順序高。 3、要是前兩者都不滿足，那麼就丟擲錯誤。

我們來看以下幾個例子：

new vue()
//頁面上渲染出了hello world
複製**

new vue()

// 頁面上渲染出了hello world

複製**

//兩者都存在的時候 new vue() // 頁面上渲染出了hello world1

複製**

從上述的例子可以看出內部的優先外部的。

2、實際上，vue例項中還有一種render選項，我們可以從文件上看一下他的用法：

new vue(
})複製**

3、上述三者的渲染優先順序：render函式 > template屬性 > 外部html

4、vue編譯過程——把tempalte編譯成render函式的過程。

我們先來看乙個例子：

}new vue(,

beforemount: function

() ,

mounted: function

() })

// 輸出的結果：

// 呼叫了beforemount

// 1

// //

// 呼叫了mounted

// 1

// 複製**

建立vue例項的$el，然後用它替代el屬性。

這個過程中，我們會發現，當乙個資料發生改變時，你的檢視也將隨之改變，整個更新的過程是：資料改變——導致虛擬dom的改變——呼叫這兩個生命鉤子去改變檢視

// 沒繫結的情況
var vm = new vue(,
updated: function() ,
data: 
})vm.a = 2
//這種情況在控制台中是什麼都不會輸出的。
複製**

var vm = new vue(,
updated: function() ,
data: 
})vm.a = 2
// 輸出結果：
// 呼叫了beforeupdate
// 呼叫了uodated
複製**

在beferodestory生命鉤子呼叫之前，所有例項都可以用，但是當呼叫後，vue 例項指示的所有東西都會解繫結，所有的事件***會被移除，所有的子例項也會被銷毀。

let vm = new vue(,
',  beforecreate
() ,
created
() ,
beforemount
() ,
mounted
() ,
beforeupdate
() ,
updated
() ,
beforedestory
() ,
destoryed
() })
vm.message = 2
複製**

// 呼叫了beforecreate // undefined // undefined // 呼叫了created // 1 // undefined // 呼叫了beforemount // 1 // // 呼叫了mounted // 1 // 呼叫了beforeupdate // 2 // 呼叫了updated // 2

複製**

vue生命週期詳解

vue生命週期詳解

vue生命週期詳解

詳解vue生命週期

相關推薦