Vue.js中 computed 和 methods 的區(qū)別

TwIStOy 發(fā)布于2019-08-02 14:06 / 2292人閱讀

摘要：官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。的使用場景模板中的復(fù)雜邏輯表達式，為了防止邏輯過重導(dǎo)致不易維護，都應(yīng)當(dāng)把相關(guān)邏輯放入計算屬性。只在相關(guān)依賴發(fā)生改變時它們才會重新求值。

官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。

computed 的使用場景

HTML模板中的復(fù)雜邏輯表達式，為了防止邏輯過重導(dǎo)致不易維護，都應(yīng)當(dāng)把相關(guān)邏輯放入計算屬性。

比如這種

    
        Reversed message: "{{ message.split("").reverse().join("") }}"

在這個地方，模板不再是簡單的聲明式邏輯。這里是想要顯示變量 message 的翻轉(zhuǎn)字符串，而這種包含復(fù)雜邏輯處理的表達式，都應(yīng)當(dāng)使用計算屬性。

computed 和 methods 的區(qū)別 1. computed是屬性調(diào)用，而methods是函數(shù)調(diào)用

這意味著在HTML的插值里

computed定義的方法是以屬性訪問的形式來調(diào)用，如 {{reversedMessageComputed}}

methods定義的方法，則要加上 () 來調(diào)用，如 {{reversedNameMethod()}} ，否則視圖中會渲染出如下內(nèi)容

function () { [native code] }

2. computed帶有緩存功能，而methods不是

這里我引用一下官方文檔的說明

計算屬性是基于它們的依賴進行緩存的。只在相關(guān)依賴發(fā)生改變時它們才會重新求值。



    Reversed message: "{{ reversedNameMethod() }}"
    Reversed message: "{{ reversedMessageComputed }}"

// javascript
var vm = new Vue({
    el: "#root",
        data: {
        name: "Alex",
        message: "Hello"
    },
    methods: {
      reversedNameMethod: function () {
        return this.name.split("").reverse().join("")
      }
    },
    computed: {
        // 計算屬性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 實例
        return this.message.split("").reverse().join("")
        }
    }
})

上面的例子中，緩存意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessageComputed 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。而 reversedNameMethod() 方法，每次調(diào)用都會重新執(zhí)行函數(shù)。

但同時需要注意，這也同樣意味著下面的計算屬性將不再更新，因為 Date.now() 不是響應(yīng)式依賴：

// javascript
computed: {
    now: function () {
        return Date.now()
    }
}

now 的值將在Vue實例化時生成，并且不再改變。
相比之下，每當(dāng)觸發(fā)重新渲染時，調(diào)用方法將總會再次執(zhí)行函數(shù)。

computed其他說明

computed 和 methods 不可以重名

Vue會把 methods 和 data 里的東西，全部代理到Vue生成的對象中，這會將computed中重名屬性覆蓋

GPU云服務(wù)器云服務(wù)器中SP與DP的區(qū)別寬帶和專線的區(qū)別專線和寬帶的區(qū)別空間和域名的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53570.html

發(fā)表評論

登陸后可評論

0條評論

TwIStOy

男|高級講師

我要關(guān)注我要私信

TA的文章

100天漲薪4k！從功能測試到自動化測試，我整理的超全學(xué)習(xí)指南！

閱讀 2154·2021-10-12 10:11
● JDK JRE JVM三者的區(qū)別

閱讀 851·2021-10-09 09:41
Confluence漏洞或致大規(guī)模網(wǎng)絡(luò)攻擊客戶群體包括近6萬家公司和組織

閱讀 3773·2021-09-09 11:37
易速互聯(lián)：十三周年慶，美國Az機房，1Gbps不限流量服務(wù)器僅550元，服務(wù)器支持自由定制配置

閱讀 1950·2021-09-08 10:41
css3動畫在手機端的流暢度比較

閱讀 2647·2019-08-30 12:58
【整理】18種推薦的CSS命名和書寫規(guī)范

閱讀 2376·2019-08-30 10:58
gulp插件解決瀏覽器緩存問題

閱讀 1286·2019-08-26 13:40
Bootstrap FileInput(文件上傳)中文API整理

閱讀 4123·2019-08-26 13:36

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vue.js中 computed 和 methods 的區(qū)別

相關(guān)文章