Vue.js中 computed 和 methods 的區別

Raaabbit 發布于2019-08-23 14:46 / 1003人閱讀

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

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

computed 的使用場景

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

比如這種

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

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

computed 和 methods 的區別 1. computed是屬性調用，而methods是函數調用

這意味著在HTML的插值里

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

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

function () { [native code] }

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

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

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



    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 還沒有發生改變，多次訪問 reversedMessageComputed 計算屬性會立即返回之前的計算結果，而不必再次執行函數。而 reversedNameMethod() 方法，每次調用都會重新執行函數。

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

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

now 的值將在Vue實例化時生成，并且不再改變。
相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數。

computed其他說明

computed 和 methods 不可以重名

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101117.html

Vue.js中 computed 和 methods 的區別

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

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

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

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

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

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

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

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

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

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