亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

TwIStOy / 2329人閱讀

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

官方文檔中已經(jīng)有對(duì)其的解釋了，在這里把我的理解記錄一下。
computed 的使用場(chǎng)景

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

比如這種

    

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

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

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

這意味著在HTML的插值里

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

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

function () { [native code] }

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

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

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



    
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: {
        // 計(jì)算屬性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 實(shí)例
        return this.message.split("").reverse().join("")
        }
    }
})

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

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

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

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

computed其他說明

computed 和 methods 不可以重名

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/53570.html

相關(guān)文章

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

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

    Raaabbit 評(píng)論0 收藏0

  • [Vue.js進(jìn)階]從源碼角度剖析計(jì)算屬性的原理

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

    melody_lql 評(píng)論0 收藏0

  • Vue.js起手式+Vue小作品實(shí)戰(zhàn)

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

    CompileYouth 評(píng)論0 收藏0

  • Vue.js起手式+Vue小作品實(shí)戰(zhàn)

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

    付倫 評(píng)論0 收藏0

  • vue面試

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

    vspiders 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<