詳解Vue 實例中的生命周期鉤子

2019-11-19 17:05:50

字體：大中小

來源：轉載

供稿：網友

Vue 框架的入口就是 Vue 實例，其實就是框架中的 view model ，它包含頁面中的業務處理邏輯、數據模型等，它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。

Vue 實例

在文檔中經常會使用 vm 這個變量名表示 Vue 實例，在實例化 Vue 時，需要傳入一個選項對象，它可以包含數據(data)、模板(template)、掛載元素(el)、方法(methods)、生命周期鉤子(lifecyclehook)等選項。

Vue 實例化的選項

需要注意的是含 this 的函數大多不要使用箭頭函數，因為我們期望 this 指向 Vue 實例。

data

Vue 實例的數據都保存在 data 對象中，Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。

var data = { a: 1 }// 直接創建一個實例var vm = new Vue({ data: data})vm.a // -> 1vm.$data === data // -> true

這樣數據就綁定在 HTML 中，Vue 框架監視 data 的數據變化，自動更新 HTML 內容。

computed

計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue

實例。

var vm = new Vue({ data: { a: 1 }, computed: { // 僅讀取，值只須為函數 aDouble: function () {  return this.a * 2 }, // 讀取和設置 aPlus: {  get: function () {  return this.a + 1  },  set: function (v) {  this.a = v - 1  } } }})vm.aPlus // -> 2vm.aPlus = 3vm.a  // -> 2vm.aDouble // -> 4

這里可以省略setter,如果省略了setter，那么值就可以是普通函數，但是必須有返回值。

methods

methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。

var vm = new Vue({ data: { a: 1 }, methods: { plus: function () {  this.a++ } }})vm.plus()vm.a // 2

看下面這個例子，methods 和 computed 看起來可以做同樣的事情，單純看結果兩種方式確實是相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。相比而言，只要發生重新渲染，method 調用總會執行該函數。

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () {  // `this` points to the vm instance  return this.message.split('').reverse().join('') } }})

watch

一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。

var vm = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { // 監控a變量變化的時候，自動執行此函數 a: function (val, oldVal) {  console.log('new: %s, old: %s', val, oldVal) }, // 深度 watcher c: {  handler: function (val, oldVal) { /* ... */ },  deep: true } }})vm.a = 2 // -> new: 2, old: 1

Vue 實例的生命周期

Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。通俗說就是 Vue 實例從創建到銷毀的過程，就是生命周期。

在Vue的整個生命周期中，它提供了一些生命周期鉤子，給了我們執行自定義邏輯的機會。

接下來我們用幾個例子來看看生命周期鉤子是怎么用的：

HTML結構：

<div id="app"> <p>{{ number }}</p> <input type="text" name="btnSetNumber" v-model="number"></div>

我們對 input 和 p 綁定了data 對象的 number 數據，Vue 實例構建如下：

var app = new Vue({    el: '#app',     data: {       number: 1 }})

在實例中分別在每個生命周期鉤子中 console.log('鉤子名稱',this.number) 我們發現，第一次頁面加載時觸發了 beforeCreate, created, beforeMount, mounted 這幾個鉤子，data 數據在 created 中可獲取到。

再去 console.log('mounted: ', document.getElementsByTagName('p')[0]) ，DOM 渲染在 mounted 中已經
完成。

我們再試著去更改 input 輸入框中的內容，可以看到輸入框上方的數據同步發生改變，這就是數據綁定的效果，在更新數據時觸發 beforeUpdate 和 updated 鉤子，且在 beforeUpdate 觸發時，數據已更新完畢。

而 destroy 僅在調用app.$destroy();時觸發，對 vue 實例進行銷毀。銷毀完成后，我們再重新改變 number 的值，vue 不再對此動作進行響應了。但是原先生成的dom元素還存在，可以這么理解，執行了destroy操作，后續就不再受vue控制了。

Vue.nextTick

在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

Vue.nextTick(function () { // DOM 更新了})

官方還提供了一種寫法，vm.$nextTick，用 this 自動綁定到調用它的實例上

created() { setTimeout(() => {   this.number = 100   this.$nextTick(() => {   console.log('nextTick', document.getElementsByTagName('p')[0])   }) },100)}

什么時候需要用的Vue.nextTick()

在 Vue 生命周期的 created() 鉤子函數進行的 DOM 操作一定要放在 Vue.nextTick() 的回調函數中。原因是什么呢，原因是在 created() 鉤子函數執行的時候 DOM 其實并未進行任何渲染，而此時進行 DOM 操作無異于徒勞，所以此處一定要將 DOM 操作的 js 代碼放進 Vue.nextTick() 的回調函數中。與之對應的就是 mounted 鉤子函數，因為該鉤子函數執行時所有的 DOM 掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題。

在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的 DOM 結構的時候，這個操作都應該放進 Vue.nextTick() 的回調函數中。

生命周期小結

生命周期鉤子的一些使用方法：