Vue 生命週期總結與思考實驗
阿新 • • 發佈：2018-11-14
生命週期函式就是 Vue 例項在某一個時間點自動執行的函式
先上圖，一步一步講解
建議邊看生命週期圖 邊看最下面的步驟一步一步的走，有不理解的地方看看總結。並且在事件中多實驗。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="app">hello Vue</div> <script> // 生命週期函式就是 Vue 例項在某一個時間點自動執行的函式 // 總共有11個生命週期鉤子 圖上有8個生命週期鉤子 /** * 1：首先它會去 初始化事件 和 生命週期相關的一些內容 最基礎的初始化完成 * 在圖中就是 Init Events & Lifecycle * 2：Vue 會自動的執行 beforeCreate 生命週期函式 * 3：Vue 會繼續的處理一些外部的注入包括雙向的一些繫結相關的內容， * 當這部分的初始化也完成了之後，例項的一些初始化也都完成了。 * 4:在這個節點上會自動的執行 created生命週期函式, Vue的初始化基本上已經結束 * 5:然後會去判斷我這個例項上是否有 el屬性，如果有就會走Yes這條線。 * 6:緊接著又會詢問 我這個例項上是否有 template 這個屬性 * 6-1:如果沒有tempate 就會去走右側的分支，就是把el 本身及子元素當做模板來進行渲染 * 6-2:如果有 template 屬性就會去走左邊的分支，把templaet 屬性值進行渲染。el就被否定了 * 7:我們有了模板和資料之後並沒有直接去進行渲染，在渲染之前呢 會自動的執行 beforeMount 生命週期函式，也就是模板和資料相結合 ，即將掛載到頁面上去之前的時候回執行 * 8:當掛載渲染到頁面之上後 執行 mounted 生命週期函式 * * beforeDestroy 生命週期函式 即將被銷燬執行 * destroyed 生命週期函式 被銷燬之後執行 * 會在 這個Vue 例項 呼叫 $destroy() 方法會被執行這兩個方法 * * beforeUpdate 生命週期函式 在資料發生改變還沒被渲染之前執行 * updated 生命週期函式 在重新渲染之後 會被執行 * 會在 Vue 的資料發生改變執行 */ var vm = new Vue({ el:'#app', data:{ message:"this is Vue life cycle" }, // template:"<div>如果有template 屬性則執行template 進行渲染DOM</div>", template:"<div>{{message}}</div>", // 在建立Vue 例項之前執行的函式 beforeCreate:function () { console.log('beforeCreate'); }, // 建立Vue 例項成功之後執行的函式 created:function () { console.log('created'); }, // 如果有template 模板屬性 則將模板編譯渲染DOM // 如果沒有template 編譯el 的DOM 包含元素本身及內部的 // 在掛載之前執行 也就是在真正渲染前執行 beforeMount:function () { console.log(this.$el); console.log('beforeMount'); }, // 渲染完成執行的方法 mounted:function () { console.log(this.$el); console.log('mounted'); }, // 當資料發生變化時 beforeUpdate:function () { console.log('beforeUpdate'); }, // 虛擬DOM 重新渲染 修改 updated:function () { console.log('updated'); }, // 當執行這個Vue例項的 $destroy() 方法時執行 beforeDestroy:function () { console.log(this.message); }, // 當刪除了Vue例項時執行的方法 destroyed:function () { console.log(this.message); } }) </script> </body> </html>
補充這個當時遇到沒想明白，現在理解了的問題 分享：
// 我們的資料物件
var data = { a: 1};
// 該物件被加入到一個 Vue 例項中
var vm = new Vue({
data: data
});1:開啟頁面，到控制檯 Console 頁面
data.a
vm.a
// 檢視雙方的值
2:現在改變 data.a 的值 該為 520 檢視vm.a 的值是否改變 。 是否是雙向繫結
data.a = 520 vm.a
結果發現確實是如我們所料 ，資料是雙向繫結的 是引用同一個記憶體地址
官方文件是這麼說的：
當這些資料改變時，檢視會進行重渲染。值得注意的是只有當例項被建立時 data 中存在的屬性才是響應式的
但是雖然好像似懂非懂，但是不知道怎麼去測試。
3:在控制檯宣告的新變數 dd = 888 ,並且去繫結到 vm的 data資料中
dd = 888
vm.b = dd
vm.b
4:這時候改變 vm.b = 999，去檢視下 dd 結果發現 dd的值還是 888 那麼對 b 的改動將不會觸發任何檢視的更新
5:這時候在去測試下 vm.a = 555 在去看 data.a 發現還是雙向繫結的
然後，在去看文件的這句話:
如果你知道你會在晚些時候需要一個屬性，但是一開始它為空或不存在，那麼你僅需要設定一些初始值。比如：
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}