創(chuàng)建一個Vue實例

每個Vue應用都是通過Vue函數創(chuàng)建一個新的Vue實例開始的,所有的Vue組件都是Vue實例,通常用vm變量表示Vue實例

var vm = new Vue({

? ? //選項詳看API文檔

})

數據與方法

當一個Vue實例被創(chuàng)建時,它向Vue的響應式系統中加入了其data對象中能找到的所有的屬性.當這些屬性的值發(fā)生改變時,視圖將會產生響應,匹配更新為新值(注意:只有當實例被創(chuàng)建時data中存在的屬性才是響應式的,當使用Object.freeze()時,會阻止修改現有的屬性,也意味著響應式的系統無法再追蹤變化)

var data = { a:1 }

var vm = new Vue({

? ? data:data

})

vm.a === data.a // =>true

vm.a = 2;

data.a = 2

data.a = 3

vm.a = 3

除了數據屬性,Vue實例還暴露了一些實例屬性和方法,它們都有前綴$,以便和用戶自定義的屬性區(qū)分開來

var data = { a:1 }

var vm = new Vue({

? ? el:"#example",

? ? data:data

})

vm.$data === data

vm.#el === document.getElementById("example")

vm.$watch("a", function(newValue, oldValue){

? ? //這個回調將在vm.a改變后調用

})

實例生命周期鉤子

每個Vue實例在被創(chuàng)建的時候都要經過一系列的初始化過程:需要設置數據監(jiān)聽、編譯模板、將實例掛載到DOM并在數據變化時更新DOM。同時在這個過程中也會運行一些叫做生命周期鉤子的函數

created鉤子、mounted鉤子、updated鉤子和destroyed鉤子

例如：

new Vue({

? ? data:{

? ? ? ? a:1

? ? },

? ? created:function(){

? ? ? ? //this?指向vm實例

? ? }

})

生命周期圖示

下圖展示了Vue實例的生命周期