Vue之計算屬性詳解

2022-10-10 06:48:09 字數 527 閱讀 9327

1、何為計算屬性:大白話講就是計算出來的結果儲存在屬性當中,可以想象為快取。

執行結果:

可能咋一看好像沒什麼區別呀。

但是我們仔細思考一下,乙個是方法,乙個是屬性。

如下所示:

重點:屬性是存值的,有新的值進來才會改變,不然就跟快取一樣,我們來看這個:

解釋一下:

1.在1、2當中我們可以看出,乙個是方法乙個是屬性,屬性用方法來呼叫肯定是不行的。

2.在1、3當中我們可以看出,方法呼叫的值一直在變,但是屬性呼叫的值沒有改變這就跟他是快取機制一樣

3.在3、4、5當中我們就可以看出,當我們一旦改變了函式當中的值,就相當於改變了快取中的值,那麼他就會重新整理值。

總結呼叫方法時,每次都需要進行計算,既然有計算過程則必定產生系統開銷,那如果這個結果是不經常變化的呢?此時就可以考慮將這個結果快取起來。採用計算機屬性可以很方便做到這一點。計算機屬性的主要特性就是為了將不經常變化的計算結果進行快取,以節約我們的系統開銷。——-小夥伴們明白了嗎?

本篇文章就到這裡了,希望能夠給你帶來幫助。

vue之計算屬性

在vue元件的模板中有很多需要通過計算來表達的地方使用計算屬性十分方便,比如在外賣評價中常見的是一星到五星,這時候我們需要通過計算資料庫傳來的評分來判定這家店屬於幾星的範疇。計算屬性官網分為computed和methods兩種,其中computed有使用之前快取計算結果的功能只有相關依賴發生變化它才...

Vue之計算屬性實戰

例1 差值模板中使用js表示式 data 模板內的表示式非常便利,但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。原始值 p 反轉訊息 p 所以,對於任何複雜邏輯,你都應當使用計算屬性 例2 使用計算屬性 computed 反轉訊息 p 例3 使用方法 method...

vue 計算屬性和data vue之計算屬性

官方解釋 當模板中放入太多的邏輯,模板過重且難以維護時,你都應當使用計算屬性 通俗表達 當你要渲染到頁面的資料需要通過大量的計算才可以得到,這時候就應該使用計算屬性 案例 htmloriginal message computed reversed message jsvar vm new vue ...