vue-學習筆記-Vue 實例

建立一個 Vue 實例

var vm = new Vue({ // 選項
})

 

當建立一個 Vue 實例時，你能夠傳入一個選項對象。

這篇教程主要描述的就是如何使用這些選項來建立你想要的行爲。

做爲參考，你也能夠在 API 文檔 中瀏覽完整的選項列表

 

一個 Vue 應用由一個經過 new Vue 建立的根 Vue 實例，以及可選的嵌套的、可複用的組件樹組成。舉個例子，一個 todo 應用的組件樹能夠是這樣的

數據與方法

值得注意的是只有當實例被建立時 data 中存在的屬性纔是響應式的。

也就是說若是你添加一個新的屬性,就不是響應式的!

若是你知道你會在晚些時候須要一個屬性，可是一開始它爲空或不存在，那麼你僅須要設置一些初始值

使用 Object.freeze()，這會阻止修改現有的屬性，也意味着響應系統沒法再追蹤變化。第一次仍是能夠正確顯示的！

 

除了數據屬性，Vue 實例還暴露了一些有用的實例屬性與方法。它們都有前綴 $，以便與用戶定義的屬性區分開來 $data,$watch,$el

var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true
vm.$el === document.getElementById('example') // => true // $watch 是一個實例方法
vm.$watch('a', function (newValue, oldValue) { // 這個回調將在 `vm.a` 改變後調用
})

實例生命週期鉤子

每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。

同時在這個過程當中也會運行一些叫作生命週期鉤子的函數，這給了用戶在不一樣階段添加本身的代碼的機會

 

new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 實例
    console.log('a is: ' + this.a) } }) // => "a is: 1"

 

mounted、updated 和 destroyed。

生命週期鉤子的 this 上下文指向調用它的 Vue 實例。

不要在選項屬性或回調上使用箭頭函數，好比 

created: () => console.log(this.a) 

 vm.$watch('a', newValue => this.myMethod())。

由於箭頭函數並無 this，this會做爲變量一直向上級詞法做用域查找，直至找到爲止，

常常致使 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之類的錯誤。