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

Raaabbit 發(fā)布于2019-08-23 14:46 / 1011人閱讀

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

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

computed 的使用場景

HTML模板中的復雜邏輯表達式，為了防止邏輯過重導致不易維護，都應當把相關邏輯放入計算屬性。

比如這種

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

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

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不是

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

計算屬性是基于它們的依賴進行緩存的。只在相關依賴發(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() 不是響應式依賴：

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

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

computed其他說明

computed 和 methods 不可以重名

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

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

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

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

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

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

TwIStOy 2019-08-02 14:06 評論0 收藏0
[Vue.js進階]從源碼角度剖析計算屬性的原理

摘要：前言最近在學習計算屬性的源碼，發(fā)現(xiàn)和普通的響應式變量內(nèi)部的實現(xiàn)還有一些不同，特地寫了這篇博客，記錄下自己學習的成果文中的源碼截圖只保留核心邏輯完整源碼地址可能需要了解一些響應式的原理版本計算屬性的概念一般的計算屬性值是一個函數(shù)，這個函數(shù)showImg(https://user-gold-cdn.xitu.io/2019/5/6/16a8b98f1361f6f6); 前言最近在學習Vue計...

melody_lql 2019-05-23 17:30 評論0 收藏0
Vue.js起手式+Vue小作品實戰(zhàn)

摘要：本文是小羊根據(jù)文檔進行解讀的第一篇文章，主要內(nèi)容涵蓋的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現(xiàn)附上代碼，然后根據(jù)代碼給予個人的一些理解，最后還放上在線編輯的代碼以供練習和測試之用在最后，我參考上的一篇技博，對進行初入的本文是小羊根據(jù)Vue.js文檔進行解讀的第一篇文章，主要內(nèi)容涵蓋Vue.js的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現(xiàn)附上代...

CompileYouth 2019-08-21 11:18 評論0 收藏0
Vue.js起手式+Vue小作品實戰(zhàn)

摘要：本文是小羊根據(jù)文檔進行解讀的第一篇文章，主要內(nèi)容涵蓋的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現(xiàn)附上代碼，然后根據(jù)代碼給予個人的一些理解，最后還放上在線編輯的代碼以供練習和測試之用在最后，我參考上的一篇技博，對進行初入的本文是小羊根據(jù)Vue.js文檔進行解讀的第一篇文章，主要內(nèi)容涵蓋Vue.js的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現(xiàn)附上代...

付倫 2019-08-01 16:07 評論0 收藏0
vue面試

摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導航跳轉(zhuǎn)，，等，一般用于頁面的修改。談談你對MVVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務邏輯都在Model層中定義；View 代表UI視圖，負責數(shù)據(jù)的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0