在學習vue幾天後，感覺現在還停留在初級階段，雖然知道怎麼和後端做資料互動，但是對對vue的生命週期不甚了解。只知道簡單的使用，而不知道為什麼，這對後面的踩坑是相當不利的。
因為我們有時候會在幾個鉤子函式裡做一些事情，什麼時候做，在哪個函式裡做，我們不清楚。
今天就記錄一下學習所得。
vue例項有乙個完整的生命週期，也就是從開始建立、初始化資料、編譯模板、掛載dom、渲染→更新→渲染、銷毀等一系列過程，我們稱這是vue的生命週期。通俗說就是vue例項從建立到銷毀的過程，就是生命週期。
每乙個元件或者例項都會經歷乙個完整的生命週期，總共分為三個階段：初始化、執行中、銷毀。
beforecreate() 這是我們遇到的第乙個生命週期函式，表示例項完全被建立出來之前，會執行它。
注意： 在 beforecreate 生命週期函式執行的時候，data 和 methods 中的 資料都還沒有沒初始化
created() 這是遇到的第二個生命週期函式 ，在 created 中，data 和 methods 都已經被初始化好了！如果要呼叫 methods 中的方法，或者操作 data 中的資料，最早，只能在 created 中操作
beforemount() 這是遇到的第3個生命週期函式，表示 模板已經在記憶體中編輯完成了，但是尚未把 模板渲染到 頁面中，在 beforemount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字串
mounted() 這是遇到的第4個生命週期函式，表示，記憶體中的模板，已經真實的掛載到了頁面中，使用者已經可以看到渲染好的頁面了 ，注意： mounted 是 例項建立期間的最後乙個生命週期函式，當執行完 mounted 就表示，例項已經被完全建立好了，此時，如果沒有其它操作的話，這個例項，就靜靜的 躺在我們的記憶體中，一動不動
beforeupdate() 當執行 beforeupdate 的時候，頁面中的顯示的資料，還是舊的，此時 data 資料是最新的，頁面尚未和 最新的資料保持同步
updated() updated 事件執行的時候，頁面和 data 資料已經保持同步了，都是最新的
="修改msg"
@click
="msg='no'"
>
<
h3 id
="h3"
>}
h3>
div>
<
script
>
//建立 vue 例項，得到 viewmodel
varvm
=new
vue(,
methods:
},beforecreate() ,
created() ,
beforemount() ,
mounted() ,
//接下來的是執行中的兩個事件
beforeupdate() ,
updated()
});script
>
body
>
html
>
生命週期圖：
vue生命週期函式 鉤子函式
一 vue生命週期簡介 二 生命週期 對於執行順序和什麼時候執行，看上面圖基本有個了解了。下面我們將結合 去看看鉤子函式的執行。1.create 和 mounted beforecreated el 和 data 並未初始化 created 完成了 data 資料的初始化，el沒有 beforemo...
vue生命週期，鉤子函式
一 vue生命週期簡介 咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函式了，總結一下，對官方文件的那張圖簡化一下，就得到了這張圖。二 生命週期 對於執行順序和什麼時候執行，看上面圖基本有個了解了。下面我們將結合 去看看鉤子函式的執行。鉤子函式 1.create 和 mounted...
vue 生命週期（鉤子函式）
new vue 例項物件，下一步進入beforcreate 狀態 當使用new vue 建立物件之前，執行的事件 這裡可以做載入動畫 下一步，進入created 然後，他會檢測是否有el屬性，如果有在檢測template屬性型別，是一段渲染的函式還是一段html 然後就進入了beforemount狀...