五 Vue的計算屬性和方法和偵聽器

(一)計算屬性

首先要明白在模板語法裡面可以進行簡單運算但是盡量不要會有過多邏輯不好維護所以把操作單獨列出來

//會弄的很亂是吧所以把操作方放在 computed裡面 original message: "}" computed reversed message: "}"

data()
},computed: 
}

(二）方法 methods方法區分於計算屬性

例如：

reversed message: "}"
// 在元件中
methods: 
}

劃重點區別在

計算屬性是基於它們的響應式依賴進行快取的。只在相關的資料響應式依賴發生改變時它們才會重新求值。只要上述例子裡面的message沒有發生改變就不會在執行

原始碼中的 date.now() 不是響應式依賴

但是methods就不了只要觸發重新渲染就會再次執行

再劃重點

計算屬性是有快取的，執行一遍之後，只要有資料不變，他就不會重新整理這是他的特點就是像是那些很大的效能計算就要用計算屬性對吧尷尬的是較真的我在想既然比起來計算屬性這麼牛還用methods幹啥啊我又一想你是智障嗎這是個框架 js本就是要寫方法的，只不過這個做了優化計算屬性才有這個特點的啊是的哈

(三）偵聽器(偵聽屬性)和計算屬性的區別

什麼是偵聽器:

就是看著你變了我就怎麼樣 watch 來進行相應資料變化

舉例子

ask a yes/no question:
}data() 
},  watch: 
},

還是重點

這個例子只是演示了怎麼是用watch 但是在官網很形象的展示了

就是限制頻率進行相應的操作這個沒有用到用到再來補充

(四) 計算屬性的stter

在用的時候一般就是使用計算屬性進行資料返回所以呢就來了乙個資料設定觸發的時候進行資料的設定不寫例子了

一開始你自己開始學習相關的程式設計知識學的不深開始工作了哎呀人家用框架啊開始學框架啊其實啊框架不就是一群人做了牛的殼子你去按照人家的寫法來寫自己的專案然後我我們就在這一點點的學學一點懂一些其實很多時候要是知道了框架的底層會更加的明白就像是計算屬性裡面都是使用繫結值返回值人家就是個方法咋不能去設定值呢是啊吧

五 Vue的計算屬性和方法和偵聽器

vue計算屬性和偵聽屬性

vue中計算屬性和偵聽屬性

VUE入門到實戰 Vue計算屬性，方法和偵聽器

五 Vue的計算屬性和方法和偵聽器

vue計算屬性和偵聽屬性

vue中計算屬性和偵聽屬性

VUE入門到實戰 Vue計算屬性，方法和偵聽器

相關推薦