data, prop, computed, method 的區(qū)別
| 類型 | 加載順序 | 加載時(shí)間 | 寫法 | 作用 | 備注 |
|---|---|---|---|---|---|
| prop | 1 | beforeCreated, created之間 | 對(duì)象或數(shù)組 | 接收父組件傳遞的值 | |
| data | 3 | 同↑ | 對(duì)象或函數(shù) | 定義以及初始化數(shù)據(jù) | 最好是用于視圖上展示的數(shù)據(jù)，否則最好定義在外面或者vm對(duì)象內(nèi)（減少開支切距，提高性能）朽缎；組件內(nèi)只接受函數(shù) |
| computed | 4 | 同↑ | 函數(shù) | 提供相對(duì)簡單的數(shù)據(jù)計(jì)算 | |
| method | 2 | 同↑ | 函數(shù) | 提供相對(duì)復(fù)雜的數(shù)據(jù)計(jì)算 |
data 寫法注意
data 與 computed 的關(guān)系
根據(jù)官網(wǎng)的介紹，雖然模板內(nèi)的表達(dá)式很方便谜悟，但是對(duì)于任何復(fù)雜的邏輯话肖，你都應(yīng)當(dāng)使用計(jì)算屬性。
data 只是對(duì)于你想要展示的數(shù)據(jù)的定義葡幸，但是最筒，如果該數(shù)據(jù)需要進(jìn)行復(fù)雜的處理（例如將其變?yōu)榉D(zhuǎn)字符串等），就需要計(jì)算屬性的幫忙蔚叨。
| 類型 | 作用 | 備注 |
|---|---|---|
| data | 定義以及展示數(shù)據(jù) | |
| computed | 對(duì)數(shù)據(jù)進(jìn)行復(fù)雜的操作轉(zhuǎn)換 |
<span>{{reversedMessage}}</span>
data() {
message: '',
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
},
},
自己給自己的挖坑歷史：
事情是這樣的：最開始 data 內(nèi)聲明了 xAxisData 和 ratioLineOption（option是對(duì)象是钥，里面包括前者） 掠归，事實(shí)證明—— xAxisData改變了也不會(huì)影響option(盡管里面包含{data: this.xAxisData}，只有重新聲明改變option才行)
所以后來我把option寫在了conputed里面悄泥，如果里面有值（不包括對(duì)象）改變的話虏冻，option都會(huì)自動(dòng)更新改變。
computed 與 method 的區(qū)別
當(dāng)然弹囚，我們可以把同一函數(shù)定義為一個(gè)方法而不是計(jì)算屬性厨相，兩種方式最后的結(jié)果一樣的，不同的是鸥鹉，計(jì)算屬性是基于他們的依賴進(jìn)行緩存的蛮穿，只有相關(guān)依賴的值發(fā)生改變才會(huì)重新求值；而方法只要被觸發(fā)就會(huì)再次執(zhí)行該函數(shù)毁渗。如果你不希望有緩存践磅，請(qǐng)用方法來代替。
| 類型 | 是否被緩存 | 備注 |
|---|---|---|
| computed | 是 | 只要依賴值有變化就會(huì)立馬執(zhí)行 |
| method | 否 | 需要綁定事件 |
method: {
reversedMessage() {
return this.message.split('').reverse().join('');
},
},
computed 與 watch 的區(qū)別
在很多情況下灸异，computed 會(huì)比 watch 使用起來更加方便府适，但是當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或者開銷比較大的情況下，用 watch 會(huì)更加合適肺樟。
例如官網(wǎng)提供的例子（問與答）檐春。
watch 觀察 question 的值，若值有改變會(huì)執(zhí)行方法 getAnswer么伯，并且根據(jù) question 不同的值疟暖，answer 會(huì)給出不同的回答，并且會(huì)異步調(diào)用 API 返回相應(yīng)的值田柔，這些都是計(jì)算屬性做不到的俐巴。
| 類型 | 目的 | 備注 |
|---|---|---|
| computed | 依賴變動(dòng)實(shí)時(shí)更新數(shù)據(jù) | 更新數(shù)據(jù) |
| watch | 觀察某一特定的值，執(zhí)行特定的函數(shù) | 觀察數(shù)據(jù) |
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{answer}}</p>
</div>
var watchExampleVM = new Vue({
el: "watch-example",
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!',
},
watch: {
question: function(newquestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing';
this.getAnswer();
},
},
method: {
getAnswer: _.debounce{
function() {
if (this.question.indexOf('?') === -1) {
this.answer = 'Question ususally contain a question mark -- ?';
}
this.answer = 'Thinking';
var vm = this.axios.get(XXX)
` ` ` ` ` `
},
500
},
},
})
