每個Vue應用都是通過vue函數(shù)蜈七,創(chuàng)建一個實例開始的乱凿。
var vm = new Vue({
// 選項
})
創(chuàng)建一個 Vue 實例時蚯撩,你可以傳入一個選項對象础倍。這篇教程主要描述的就是如何使用這些選項來創(chuàng)建你想要的行為。作為參考胎挎,你也可以在 API 文檔 中瀏覽完整的選項列表沟启。
一個 Vue 應用由一個通過 new Vue
創(chuàng)建的根 Vue 實例,以及可選的嵌套的犹菇、可復用的組件樹組成德迹。舉個例子,一個 todo 應用的組件樹可以是這樣的:
數(shù)據(jù)與方法
當一個 Vue 實例被創(chuàng)建時揭芍,它向 Vue 的響應式系統(tǒng)中加入了其 data 對象中能找到的所有的屬性胳搞。當這些屬性的值發(fā)生改變時,視圖將會產(chǎn)生“響應”,即匹配更新為新的值肌毅。
// 我們的數(shù)據(jù)對象
var data = { a: 1 }
// 該對象被加入到一個 Vue 實例中
var vm = new Vue({
data: data
})
// 獲得這個實例上的屬性
// 返回源數(shù)據(jù)中對應的字段
vm.a == data.a // => true
// 設置屬性也會影響到原始數(shù)據(jù)
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
當這些數(shù)據(jù)改變時币厕,視圖會進行重渲染。值得注意的是只有當實例被創(chuàng)建時 data 中存在的屬性才是響應式的芽腾。這牽扯到 vue 的生命周期旦装。
實例生命周期鉤子
每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如,需要設置數(shù)據(jù)監(jiān)聽摊滔、編譯模板阴绢、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)艰躺,這給了用戶在不同階段添加自己的代碼的機會呻袭。
比如 created
鉤子可以用來在一個實例被創(chuàng)建之后執(zhí)行代碼:
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的鉤子,在實例生命周期的不同階段被調用腺兴,如 mounted
左电、updated
和 destroyed
。生命周期鉤子的 this
上下文指向調用它的 Vue 實例页响。
注意
不要在選項屬性或回調上使用箭頭函數(shù)篓足,比如 created: () => console.log(this.a)
或 vm.$watch('a', newValue => this.myMethod())
。因為箭頭函數(shù)是和父級上下文綁定在一起的闰蚕,this
不會是如你所預期的 Vue 實例栈拖,經(jīng)常導致 Uncaught TypeError: Cannot read property of undefined
或 Uncaught TypeError: this.myMethod is not a function
之類的錯誤。
如果使用箭頭函數(shù) this
的指向發(fā)生錯誤没陡,
可以在箭頭函數(shù)外 let self = this涩哟;
,然后使用self代替this即可盼玄。
vue生命周期詳解可以看我的這篇文章贴彼,這里只做簡單介紹。