Vue Instance

使用 Vue constructor 建立 Vue instance「vm」
這個Instance vm就是擔任(MVVM)view model的角色。
（Instance裡面藏了什麼這麼香？）

let vm = new Vue({
    el: '#app',
    data: {
    	message: 'test'
    },
	methods: {
		getText(){
			return 'Hello World !'
		}
	}
})

Vue建立Instance時，可傳入物件，以上面的例子來說：
el：代表要將此Instance掛載到HTML DOM元素
data：代表準備好要呈現在掛載區塊內的資料
methods：代表定義出要使用的function

Vue Instance基本屬性

• el：Vue Instance掛載
• data：綁定資料
• props：元件接收傳遞的屬性資料
• methods：熟悉的function事件最對味
• watch：觀察Vue Instance內的資料變化
• computed：自動計算Vue屬性
• template：Vue變更後的樣板
• components：Vue的子元件

el是用Vue實體來掛載HTML的DOM元素，如果沒有el屬性，可以用mount()做手動掛載，這個方法不常用。

Vue lifecycle

Vue生命週期就是Instance從創造到銷毀的過程～

beforeCreate :

Instance初始化
此時this指向Instance
data, computed, watch, methods上的方法、資料還不能使用

created

Instance建立完成
尚未掛載DOM
可對data的資料進行操作（如初始化data資料）
data, computed, watch, methods上的方法、資料已能使用

berofeMount

有了el, 編譯template、掛載到HTML之前

mounted

完成建立vm.$el和雙向绑定
完成掛載DOM且完成了雙向綁定，可對DOM,$ref操作
編譯template、掛載到HTML之後

beforeUpdate

元件更新前

updated :

完成虛擬DOM的re-render
元件DOM已完成更新
注意：不要在此處操作資料，會陷入無限循環

activated:

for keep-alive 元件被啟動時使用

deactivated

for keep-alive 元件被移除時使用

beforeDestroy：

在vm.$destroy()之前，可做刪除前的提示

destroyed ：

當前元件已被刪除，銷毀監聽事件，此時已經無法操作元件的任何東西了。
不會將畫面銷毀，只會銷毀資料

Resource
包你理解--- vue的生命週期
Vue Instance/生命週期介紹