成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

【Vue計算屬性】

王陸寬 / 1079人閱讀

摘要：計算屬性語法在構(gòu)造函數(shù)的參數(shù)對象中有一個屬性，該屬性就是用于定義計算屬性的，該對象中的鍵也就是我們的計算屬性，與不同的是，計算屬性的鍵值是一個擁有返回值的函數(shù)，該函數(shù)中可以訪問到中的所有屬性。

我們都知道在Vue構(gòu)造函數(shù)的參數(shù)對象中有一個【data】屬性，該屬性值是一個對象，該對象是對數(shù)據(jù)的代理，是一個鍵值對并且時刻與頁面表現(xiàn)是一致的，但是這里面只能是簡單的鍵值對，不能擁有業(yè)務(wù)邏輯，并且由于【data】中的屬性屬于同一個生命周期，所以如果我們需要某一個屬性是依賴于另外一個屬性時，在【data】中是做不到的，于是Vue為我們提供了【計算屬性】

一、計算屬性 1.1 概述

計算屬性歸根結(jié)底也是屬性，它也是跟表現(xiàn)層是時刻同步的，雖然我們可以在插值中對數(shù)據(jù)進(jìn)行各種處理，但是插值中的表達(dá)式處理畢竟只能用于簡單的運(yùn)算，不能擁有太多的業(yè)務(wù)邏輯。


    

        
{{name.toUpperCase()}}

上面代碼是我們熟悉的在插值中使用表達(dá)式，但是這里面我們不能寫入業(yè)務(wù)代碼。

1.2 計算屬性語法

在構(gòu)造函數(shù)的參數(shù)對象中有一個【computed】屬性，該屬性就是用于定義計算屬性的，該對象中的【鍵】也就是我們的計算屬性，與【data】不同的是，計算屬性的鍵值是一個【擁有返回值的函數(shù)】，該函數(shù)中可以訪問到【data】中的所有屬性。


    

        
{{rs}}

上面代碼屬性【rs】是定義的一個計算屬性,該屬性值是通過【data】中的兩個屬性值計算得到，返回一個拼接的字符串（這兒使用了ES6的【模板字符串】）并且當(dāng)【data】中的相關(guān)值變化之后，【rs】屬性都會進(jìn)行重新計算。

可能剛開始對計算屬性會有些疑惑，比如上面的例子我把代碼寫成下面這樣子也是可以的


    

        
{{hs}} LOVE {{wf}}

上面的代碼運(yùn)行效果和我們使用計算屬性的效果是一樣的，但是這樣的寫法只適用于簡單的處理，【計算屬性可以處理更復(fù)雜的業(yè)務(wù)邏輯】，比如我們根據(jù)【data】中的一個屬性值進(jìn)行數(shù)據(jù)請求用于構(gòu)建一個屬性，我們就必須使用計算屬性了。

【注意??！】計算屬性雖然是一個方法，但是在Vue內(nèi)部會被翻譯成一個屬性，我們可以使用實(shí)例【vm.rs】訪問到數(shù)據(jù)的。

1.3 計算屬性和過濾器的比較

如果用于對【data】中【單個】屬性的【簡單】處理，推薦使用過濾器，但是如果一個值使用了【data】中至少2個值或者對一個值進(jìn)行復(fù)雜處理，那么就推薦使用計算屬性了。


    

        
{{hs | lover}}

上面代碼就使用了一個【data】屬性值做簡單的處理，所以使用過濾器，而且也發(fā)現(xiàn)了過濾字符串“LOVE PINK”是不可變的。

1.4 計算屬性和Methods的比較

計算屬性就是為了定屬性的時候處理復(fù)雜的業(yè)務(wù)邏輯，而且在插值中我們可以使用表達(dá)式，那么我們是否可以通過使用在插值中調(diào)用一個有返回值的函數(shù)呢？它和計算屬性又有什么區(qū)別呢？


    

        
{{rs}}

上面代碼將數(shù)據(jù)進(jìn)行反向處理（使用了【ES6數(shù)組字符串?dāng)U展】），當(dāng)我們改變name的值的時候，計算屬性【rs】會跟著改變。下面我們將它改成一個方法結(jié)合插值表達(dá)式進(jìn)行處理，看看區(qū)別。


    

        
{{ rs() }}

上面代碼將計算屬性改成了一個方法結(jié)合插值表達(dá)式，發(fā)現(xiàn)效果和計算屬性沒差別，改變name的值的時候頁面也刷新了。那是不是這兩者就真的沒區(qū)別呢，答案當(dāng)然是否定的，如果沒有區(qū)別干嘛還有計算屬性的存在。

【計算屬性是基于依賴進(jìn)行緩存的】，只有計算屬性的依賴發(fā)生改變時才會重新求值，也就是說如果依賴沒有發(fā)生改變，那么計算屬性會立刻返回之前的計算結(jié)果，假如我們有一個性能開銷比較大的的計算屬性 A ，它需要遍歷一個極大的數(shù)組和做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請用 method 替代。

1.5 計算屬性和Watch的比較

我們發(fā)現(xiàn)計算屬性會監(jiān)聽依賴，如果依賴發(fā)生變化則會從新計算屬性，那么【監(jiān)聽器】也有這么一個功能，那么我們應(yīng)該在什么時候使用【計算屬性】，什么時候使用【監(jiān)聽器】呢？


    

        
{{fullName}}

上面代碼中我們監(jiān)聽firstName和lastName用于構(gòu)建fullName，效果很好，當(dāng)firstName和lastName任意一個值改變的時候fullName都會隨之改變。下面我們看一下計算屬性的寫法


    

        
{{fullName}}

上面代碼使用計算屬性的方式進(jìn)行了改造，fullName 依賴 firstName和 lastName 兩個屬性，當(dāng)這兩個屬性任意一個發(fā)生變化，fullname都會重新進(jìn)行計算。但是計算屬性是不是簡潔了很多呢！

【總結(jié)?。　慨?dāng)一個屬性需要依賴多個【data】中的屬性時，建議使用計算屬性，如果我們不是對屬性進(jìn)行操作，只是單純的依據(jù)【data】中的某個值變化后做一些【非屬性操作】時或者是在數(shù)據(jù)變化響應(yīng)時，【執(zhí)行異步操作或開銷較大的操作】（比如：將變化后的值存入數(shù)據(jù)庫，而不是改變其他屬性）就使用Watch。

1.6 計算屬性的setter

上面我們是使用的計算屬性都是用于對計算屬性的取值，計算屬性默認(rèn)頁只給了【getter】，但是在需要的時候我們可以人為的添加【setter】


    

        
{{fullName}}

上面代碼定義了計算屬性的一個setter，注意當(dāng)需要定義setter的時候語法上面是有區(qū)別的。

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/84632.html

相關(guān)文章

  • Vue.js-計算屬性和class與style綁定

    摘要：每一個計算屬性都包含一個和一個。使用計算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動態(tài)更新元素上的屬性。測試文字當(dāng)?shù)谋磉_(dá)式過長或邏輯復(fù)雜時，還可以綁定一個計算屬性。 學(xué)習(xí)筆記：前端開發(fā)文檔 計算屬性 所有的計算屬性都以函數(shù)的形式寫在Vue實(shí)例中的computed選項(xiàng)內(nèi)，最終返回計算后的結(jié)果。 計算屬性的用法 在一個計算屬性中可以完成各種復(fù)雜的邏輯，包括運(yùn)算、函數(shù)調(diào)用等，只要最終...

    Shihira 評論0 收藏0

  • Vue 數(shù)據(jù)響應(yīng)式原理

    摘要：接下來，我們就一起深入了解的數(shù)據(jù)響應(yīng)式原理，搞清楚響應(yīng)式的實(shí)現(xiàn)機(jī)制。回調(diào)函數(shù)只是打印出新的得到的新的值，由執(zhí)行后生成。及異步更新相信讀過前文，你應(yīng)該對響應(yīng)式原理有基本的認(rèn)識。 前言 Vue.js 的核心包括一套響應(yīng)式系統(tǒng)。 響應(yīng)式，是指當(dāng)數(shù)據(jù)改變后，Vue 會通知到使用該數(shù)據(jù)的代碼。例如，視圖渲染中使用了數(shù)據(jù)，數(shù)據(jù)改變后，視圖也會自動更新。 舉個簡單的例子，對于模板： {{ name ...

    Mike617 評論0 收藏0

  • vue學(xué)習(xí)筆記（二）

    摘要：供用戶在相應(yīng)的階段對其進(jìn)行操作。我們像下面這樣使用這個指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實(shí)例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實(shí)例選項(xiàng)。供用戶在相應(yīng)的階段對其進(jìn)行操作。 beforeCreate(){ //組件實(shí)例剛...

    klivitamJ 評論0 收藏0

  • vue學(xué)習(xí)筆記（二）

    摘要：供用戶在相應(yīng)的階段對其進(jìn)行操作。我們像下面這樣使用這個指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實(shí)例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實(shí)例選項(xiàng)。供用戶在相應(yīng)的階段對其進(jìn)行操作。 beforeCreate(){ //組件實(shí)例剛...

    Pines_Cheng 評論0 收藏0

  • vue學(xué)習(xí)筆記（二）

    摘要：供用戶在相應(yīng)的階段對其進(jìn)行操作。我們像下面這樣使用這個指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個常用的參數(shù)和。其他用法與全局自定義指令一致。 一、vue生命周期 vue實(shí)例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個階段。 這八個階段里分別有一個叫做鉤子函數(shù)的實(shí)例選項(xiàng)。供用戶在相應(yīng)的階段對其進(jìn)行操作。 beforeCreate(){ //組件實(shí)例剛...

    ideaa 評論0 收藏0

  • 后端開發(fā)者的Vue學(xué)習(xí)之路（一）

    摘要：如果我們作為一個后端開發(fā)者想掌握一個前端框架，是一個好選擇，因?yàn)樗銐虻囊讓W(xué)。是語言的下一代標(biāo)準(zhǔn)。數(shù)據(jù)方法生命周期鉤子函數(shù)其他有些內(nèi)容比較重要，留到后面講定義數(shù)據(jù)定義數(shù)據(jù)定義了數(shù)據(jù)，那么就可以在管理的區(qū)域中使用的獲取數(shù)據(jù)的語法來獲取數(shù)據(jù)。目錄 前言： iview組件庫示例 element組件庫示例 ...

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<