前言

學(xué)習(xí)vue的計(jì)算屬性之前，我們先寫一個(gè)案例，我們先用插值語法實(shí)現(xiàn)，然后再使用vue的計(jì)算屬性實(shí)現(xiàn)，經(jīng)過對比，我們就能掌握計(jì)算屬性的精髓和原理

插值語法編寫案例

寫一個(gè)簡單的例子，姓和名分別用兩個(gè)輸入框控制，最后通過一個(gè)span標(biāo)簽拼接成一個(gè)全名

首先通過簡單的插值語法實(shí)現(xiàn)，需要注意，輸入框需要使用v-model進(jìn)行綁定

看下頁面，基本功能已經(jīng)實(shí)現(xiàn)了

這時(shí)候我又有個(gè)需求，就是不管輸入框輸入多少內(nèi)容，我只截取前兩個(gè)

這個(gè)時(shí)候，我們可以直接在插值語法哪里截取，使用silce函數(shù)(start,num)從哪里開始截取，截取幾位

這樣看，我們的需求確實(shí)實(shí)現(xiàn)了，但是隨著而來的有一個(gè)新問題，如果我的需求在改變，我要求截取完之后轉(zhuǎn)成大寫再排序，那么我們的插值語法再寫更多的操作，就會(huì)變得很復(fù)雜，本來就是一個(gè)很簡單的獲取值，現(xiàn)在卻要做這么多操作，不符合vue的初衷

我們查看vue的官網(wǎng)文檔，可以清楚的看到：組件模板應(yīng)該只包含簡單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法。

我們改造下代碼，減少插值語法的工作量，使用methods優(yōu)化代碼

methods函數(shù)編寫案例

插值語法調(diào)用methods函數(shù)，我們可以自定義一個(gè)函數(shù)，然后由函數(shù)進(jìn)行邏輯處理并且返回結(jié)果，我們直接通過插值語法去調(diào)用函數(shù)獲取返回值

結(jié)果也是一樣的，這種方式對比上面的方式，更容易維護(hù)，只需要在函數(shù)里面去處理業(yè)務(wù)返回，然后插值語法直接調(diào)用函數(shù)獲取返回值即可，這也是vue推薦的方式

注意項(xiàng)

我們上面寫的插值語法調(diào)用函數(shù)，可以發(fā)現(xiàn)函數(shù)后面使用有括號(hào)的 ，我們必須得加上這個(gè)括號(hào)，不然就獲取不到返回值

以下為在插值語法加上函數(shù)括號(hào)

沒有問題，正常獲取到函數(shù)的返回值

以下為在插值語法沒有加上函數(shù)括號(hào)

發(fā)現(xiàn)只是獲取到了這個(gè)函數(shù)，并沒有獲取到返回值，所以我們用的時(shí)候必須要加上括號(hào)

計(jì)算屬性編寫案例

下面我們使用計(jì)算屬性編寫案例

所謂計(jì)算屬性就是拿著現(xiàn)有的屬性進(jìn)行操作,已經(jīng)有的屬性操作之后的結(jié)果就是計(jì)算屬性，在vue中是把屬性和計(jì)算屬性分開放的，data里面放的是屬性，計(jì)算屬性需要放在computed里面

代碼貌似寫完了，我們研究一個(gè)問題，那就是get什么時(shí)候被調(diào)用

更新代碼，注意我寫一個(gè)5個(gè)全名，按理來說我們的get應(yīng)該調(diào)用五次，但是實(shí)際上只調(diào)用了一次

為什么呢？這里就要說下get其實(shí)是有一個(gè)緩存的操作的，當(dāng)它讀取到第一個(gè)fullName的時(shí)候，解析到結(jié)果，那么以后再讀到fullName就不會(huì)重新解析，而是看看有沒有被解析過，直接復(fù)用，那么就有一個(gè)問題，如果后面fullName改了，緩存拿到的數(shù)據(jù)還是舊數(shù)據(jù)，那肯定不行的

這時(shí)候就要說下get的兩個(gè)調(diào)用時(shí)機(jī)了

get調(diào)用的兩個(gè)時(shí)機(jī)

初次讀取數(shù)據(jù)時(shí)

就是第一次讀取到數(shù)據(jù)了，會(huì)被調(diào)用get方法

所依賴數(shù)據(jù)發(fā)生變化時(shí)

所謂依賴數(shù)據(jù)就是構(gòu)成計(jì)算屬性的條件，比如a+b=c，a和b都是已有的屬性，c是計(jì)算出來的屬性，那么當(dāng)a和b的值發(fā)生得時(shí)候，get也會(huì)被調(diào)用，刷新獲取最新數(shù)據(jù)屬性，這樣就避免了拿到舊緩存數(shù)據(jù)的情況

set方法

get是獲取屬性，那么set就是修改屬性，沒有set我們就不能修改計(jì)算屬性，set不是必寫的，如果這個(gè)計(jì)算屬性就是提供給別人用的，那么完全沒必要寫了，如果這個(gè)屬性以后可能會(huì)被別人改，那么建議寫上set

注意：不管是get還是set，都不能寫成箭頭函數(shù)，不然this就不是vue實(shí)例對象了!

計(jì)算屬性簡寫形式

簡寫形式的前提：一旦計(jì)算屬性只考慮讀取展示，不考慮修改數(shù)據(jù)，才能用簡寫形式。

總結(jié)

計(jì)算屬性：
1 定義：要用的屬性不存在，要通過已有屬性計(jì)算得來
2 原理：底層借助了Object.defineproperty方法提供的getter和setter
3 get函數(shù)什么時(shí)候被執(zhí)行：
（1）初始讀取時(shí)會(huì)執(zhí)行一次
（2）當(dāng)依賴的數(shù)據(jù)發(fā)生改變時(shí)會(huì)被再次調(diào)用
4 優(yōu)勢：與methods相比，內(nèi)部有緩存機(jī)制(復(fù)用)，效率更高
5 備注：
1 計(jì)算屬性最終會(huì)出現(xiàn)在vue實(shí)例對象上，直接讀取即可
2 如果計(jì)算屬性要被修改，那必須寫set函數(shù)去響應(yīng)修改，且set中要引起計(jì)算時(shí)依賴的數(shù)據(jù)發(fā)生改變文章來源地址http://www.zghlxwxcb.cn/news/detail-793822.html

到了這里，關(guān)于Vue-計(jì)算屬性(computed)簡單說明和使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！