創(chuàng)建一個(gè)Vue實(shí)例
每個(gè)Vue應(yīng)用都是通過(guò)Vue函數(shù)創(chuàng)建一個(gè)新的Vue實(shí)例開(kāi)始的,所有的Vue組件都是Vue實(shí)例,通常用vm變量表示Vue實(shí)例
var vm = new Vue({
? ? //選項(xiàng)詳看API文檔
})
數(shù)據(jù)與方法
當(dāng)一個(gè)Vue實(shí)例被創(chuàng)建時(shí),它向Vue的響應(yīng)式系統(tǒng)中加入了其data對(duì)象中能找到的所有的屬性.當(dāng)這些屬性的值發(fā)生改變時(shí),視圖將會(huì)產(chǎn)生響應(yīng),匹配更新為新值(注意:只有當(dāng)實(shí)例被創(chuàng)建時(shí)data中存在的屬性才是響應(yīng)式的,當(dāng)使用Object.freeze()時(shí),會(huì)阻止修改現(xiàn)有的屬性,也意味著響應(yīng)式的系統(tǒng)無(wú)法再追蹤變化)
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
除了數(shù)據(jù)屬性,Vue實(shí)例還暴露了一些實(shí)例屬性和方法,它們都有前綴$,以便和用戶自定義的屬性區(qū)分開(kāi)來(lái)
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){
? ? //這個(gè)回調(diào)將在vm.a改變后調(diào)用
})
實(shí)例生命周期鉤子
每個(gè)Vue實(shí)例在被創(chuàng)建的時(shí)候都要經(jīng)過(guò)一系列的初始化過(guò)程:需要設(shè)置數(shù)據(jù)監(jiān)聽(tīng)讼渊、編譯模板变勇、將實(shí)例掛載到DOM并在數(shù)據(jù)變化時(shí)更新DOM牺荠。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)
created鉤子、mounted鉤子屏鳍、updated鉤子和destroyed鉤子
例如：
new Vue({
? ? data:{
? ? ? ? a:1
? ? },
? ? created:function(){
? ? ? ? //this?指向vm實(shí)例
? ? }
})
生命周期圖示
下圖展示了Vue實(shí)例的生命周期
