前言
官方文檔部分傳送門:https://cn.vuejs.org/v2/guide/instance.html
實(shí)例的創(chuàng)建
使用new Vue({...})
即可創(chuàng)建一個Vue實(shí)例。
其中向構(gòu)造函數(shù)傳遞的是一個對象同衣。
它擁有的屬性有:
- data
- methods
- computed
data
添加Vue實(shí)例擁有的數(shù)據(jù)。會檢測data中值的變化而更新頁面顯示。
使用方法
創(chuàng)建實(shí)例中使用
var vm = new Vue({
data: data
})
如果使用對象傳入,使用Object.freeze()后會無法檢測到值的改變。
模板結(jié)構(gòu)中使用
new Vue({
el: '#app',
data: {
text: '測試'
}
})
對應(yīng)著在模板結(jié)構(gòu)中使用:
<div id="app">
<p>{{ text }}</p>
</div>
{{}}
的形式成為Mustache寫法仗颈,里面寫的是JavaScript表達(dá)式黍瞧,顯示這個表達(dá)式的運(yùn)算結(jié)果诸尽。
一般情況下,在模板中使用是寫成函數(shù)的模式印颤,因為模板一般都是當(dāng)成組件要被復(fù)用的您机,為了能讓每個組件都有獨(dú)立的數(shù)據(jù), 所以對應(yīng)每個返回一個新的對象:
data () {
return {
text: '測試'
}
}
在JS中引用
new Vue({
el: '#app',
data: {
text: '測試'
}
})
如果我們要在Vue實(shí)例中使用text年局,調(diào)用this.text即可际看。
如果是在創(chuàng)建實(shí)例的其他JS部分使用text,調(diào)用就必須先給這個實(shí)例一個變量名矢否,然后直接變量名.數(shù)據(jù)名
就可以調(diào)用仲闽,這樣等同于變量名.$data.數(shù)據(jù)名
。
疑問記錄區(qū)
Q:這里的$data的$是什么呢僵朗?
A:Vue實(shí)例暴露了一些屬性與方法赖欣,它們都有前綴$,這樣可以與用戶定義的屬性區(qū)分验庙。例如:$data顶吮、$el、$watch粪薛。
更多傳送門:https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7
Q:為什么可以省略這個data來獲取這個值云矫?
A:
computed
故名思意,叫做計算屬性。在模板中我們可以在{{}}中直接寫入表達(dá)式让禀,但是從長遠(yuǎn)看來這樣不好維護(hù)挑社。
使用方法
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
可以看到這個例子如果直接嵌入模板中就是{{ message.split('').reverse().join('') }}
,這里寫為計算屬性巡揍,對應(yīng)了一個函數(shù)痛阻,值就是返回值。
在模板中使用也和data完全一樣腮敌,可以直接調(diào)用vm.reversedMessage
阱当,因為依賴于message,所以message改變的話糜工,它也會改變弊添。
疑問記錄區(qū)
Q:computed和data的不同之處?
A:計算屬性默認(rèn)情況下只有g(shù)etter捌木,也就是只讀油坝。data的數(shù)據(jù)讀取不到data里面其他的數(shù)據(jù),所以它不能根據(jù)原有的某個動態(tài)數(shù)據(jù)去做一些處理刨裆。
Q:computed和methods的不同之處澈圈?
A:計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值,而methods在每次重新渲染的時候都會重新計算帆啃。
watch
中文名叫做偵聽器瞬女,在數(shù)據(jù)變化時執(zhí)行異步/開銷較大的操作時推薦使用,即可能要進(jìn)行某個復(fù)雜的處理努潘。
使用方法
寫法和computed類似诽偷,也是一個對象,里面包含了目標(biāo)屬性疯坤,以及屬性對應(yīng)的函數(shù)报慕。
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = '等待輸入完畢...'
this.getAnswer()
}
}
比如這個例子,如果question的內(nèi)容發(fā)生了改變贴膘,它對應(yīng)的這個函數(shù)就會執(zhí)行。
Q:computed和watch的不同之處略号?
A:1. 光從寫法來看刑峡,如果一個值由多個變量影響,那么不適合用watch去監(jiān)聽這些變量然后改變這個值玄柠,因為這樣會有重復(fù)的代碼突梦。2. 從它出現(xiàn)的意義來看,watch最好是進(jìn)行一些操作羽利,computed就是簡化表達(dá)式處理后的數(shù)據(jù)顯示的宫患。3. watch支持執(zhí)行異步操作 (訪問一個 API),也支持得到最終結(jié)果前这弧,設(shè)置中間狀態(tài)娃闲,計算屬性不能做到虚汛。
methods
意思是方法,也就類似于我們的方法成員皇帮。
使用方法
定義
也和computed和watch類似卷哩,一個對象里寫下所有的成員和對應(yīng)的函數(shù)。
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
調(diào)用
組件內(nèi)調(diào)用:`this.reversedMessage()``