Vue學習~2：Vue實例

Vue 實例的建立

每一個 Vue 應用都是經過用 Vue 函數建立一個新的 Vue 實例開始的

當建立一個 Vue 實例時，你能夠傳入一個選項對象，指定這個 Vue 實例所管理的元素。
一個 Vue 應用由一個經過 new Vue 建立的根 Vue 實例，以及可選的嵌套的、可複用的組件樹組成

數據與方法

當一個 Vue 實例被建立時，它將 data 對象中的全部的屬性加入到 Vue 的響應式系統中。
當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。

// 咱們的數據對象
var data = { a: 1 }

// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
  data: data
})

// 得到這個實例上的屬性
// 返回源數據中對應的字段
vm.a == data.a // => true

// 設置屬性也會影響到原始數據
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

當這些數據改變時，視圖會進行重渲染。
值得注意的是只有當實例被建立時就已經存在於 data 中的屬性纔是響應式的。
也就是說若是你添加一個新的屬性，那麼這個改動將不會觸發任何視圖的更新。
若是你知道你會在晚些時候須要一個屬性，可是一開始它爲空或不存在，那麼你僅須要設置一些初始值。

這裏惟一的例外是使用 Object.freeze()，這會阻止修改現有的屬性，也意味着響應系統沒法再追蹤變化。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

實例的生命週期鉤子

每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會。