前言
官方文檔部分傳送門：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()``
