Vue的新手筆記 第1天

終於開始了Vue的筆記，來記錄一下Vue的生命週期

Vue lifecycle-hooks 這邊看到hook就想起虎克船長

Hook 指的就是虎克船長的鐵鉤，底下圖中的紅框框就是Vue的週期hook

例如：mounted這個掛勾，鉤住我們利用axios這個套件提供的方式先行從遠端伺服器取得資料的『程式碼』。

初始化階段

beforeCreate：在此階段，資料和元素掛載都沒有被建立，因此，我們無法使用寫在Vue實例中的 data和methods。

created：Vue實例已完成，除了el指定的標籤「未」完成掛載外，所有寫在選項物件中的屬性都達可供使用的狀態。

掛載階段

beforeMount：在掛載前，也就是顯示到瀏覽器前，此時render(渲染)函數首度被呼叫，因此，如果想對DOM做一些「預」處理的話，可以在這個階段做。

Mounted：el指定的標籤「已」完成掛載。

更新階段

beforeUpdate：數據被更新之前，也就是對應的DOM在被渲染前。

updated：數據更新完成，也就是對應的DOM已完成渲染。

銷毀階段

beforeDestory：Vue實例被「銷毀前」，此時可進行最後「善後」的垂死階段 。

destroyed ：Vue實力已被銷毀。

Vue 實例

在mounted這個鉤子中取得users資料並填入users陣列中：

new Vue ({

el:”#app”,

data:{ users:[]},

mounted(){

var vm = this

axios.get(“http://jsonplacholder.typicode.com/users”)

.then((response) => {

vm.user = response.data

}) }

})