Vue computed 和 watch

468122151 發(fā)布于2019-08-26 12:00 / 3082人閱讀

摘要：監(jiān)聽屬性變化，一般是用于跟數(shù)據(jù)無關(guān)的業(yè)務(wù)邏輯操作。計算屬性，適用于屬性發(fā)生變化后，需要計算得到新的數(shù)據(jù)。

computed 計算屬性：通過屬性計算得來的屬性

    計算屬性,是在相關(guān)聯(lián)的屬性發(fā)生變化才計算，計算過一次，如果相關(guān)屬性沒有變化，下一次就不需要計算了，直接去緩存的值

  a:
  b:
 
 總和：{{sum()}}
 總和：{{count}}
 平均值：{{avg}}

 單價：{{price}}
 數(shù)量：
 總價：{{sum}}
 運費：{{free}}
 應(yīng)付：{{pay}}

    data: {
            a: "",
            b:"",
            c:"",
            price: 28.8,
            count: "",
            free: 10
    },
    computed: {
        count(){
            console.log("計算屬性觸發(fā)了");
                return this.a+this.b;
        },
        avg(){
            return this.count/2;
        },
       sum(){
            return this.price * this.count;
        },
      pay(){
        if(this.count>0){
            if(this.sum>=299){
                return this.sum;
        }else{
            return this.sum + this.free;
        }
          }else{
                return 0;
        }
        }
     }

watch
屬性變化，就會觸發(fā)監(jiān)聽的函數(shù)。
監(jiān)聽屬性變化，一般是用于跟數(shù)據(jù)無關(guān)的業(yè)務(wù)邏輯操作。
計算屬性，適用于屬性發(fā)生變化后，需要計算得到新的數(shù)據(jù)。

     
            a: 

            b: 

            總和：{{count}}
            
            



            
            name: 

            age:

watch 也可以在methods里面進行監(jiān)聽配置


            a: 

            b: 

            總和：{{count}}
            
            



            
            name: 

            age:

GPU云服務(wù)器云服務(wù)器 webrtc和vue computed computer COMPUTE

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

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

相關(guān)文章

Vue的computed和watch的細節(jié)全面分析

摘要：定義是一個計算屬性類似于過濾器對綁定到的數(shù)據(jù)進行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應(yīng)的作為計算屬性定義并返回對應(yīng)的結(jié)果給這個變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當需要讀取當前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計算并返回當前 1.computed 1.1 定義是一個計算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進行處理 1.2 get用法 data: { ...

lastSeries 2019-08-01 18:25 評論0 收藏0
Vue的computed和watch的細節(jié)全面分析

摘要：定義是一個計算屬性類似于過濾器對綁定到的數(shù)據(jù)進行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應(yīng)的作為計算屬性定義并返回對應(yīng)的結(jié)果給這個變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當需要讀取當前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計算并返回當前 1.computed 1.1 定義是一個計算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進行處理 1.2 get用法 data: { ...

CoderDock 2019-08-22 13:58 評論0 收藏0
淺談Vue中計算屬性computed的實現(xiàn)原理

摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器。當某個屬性發(fā)生變化，觸發(fā)攔截函數(shù)，然后調(diào)用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數(shù)組，并逐個調(diào)用的方法，完成響應(yīng)更新。雖然目前的技術(shù)棧已由Vue轉(zhuǎn)到了React，但從之前使用Vue開發(fā)的多個項目實際經(jīng)歷來看還是非常愉悅的，Vue文檔清晰規(guī)范，api設(shè)計簡潔高效，對前端開發(fā)人員友好，上手快，甚至個人認為在很多...

laznrbfe 2019-08-23 11:56 評論0 收藏0
做面試的不倒翁：淺談 Vue 中 computed 實現(xiàn)原理

摘要：當某個屬性發(fā)生變化，觸發(fā)攔截函數(shù)，然后調(diào)用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數(shù)組，并逐個調(diào)用的方法，完成響應(yīng)更新。編者按：我們會不時邀請工程師談?wù)動幸馑嫉募夹g(shù)細節(jié)，希望知其所以然能讓大家在面試有更出色表現(xiàn)。也給面試官提供更多思路。 showImg(https://segmentfault.com/img/bVbgYyU?w=1200&h=600); 雖然目前的技術(shù)...

Anonymous1 2019-08-23 11:57 評論0 收藏0
針對vue wtach一次詳細的剖析

摘要：提問深度與非深度的區(qū)別對象與數(shù)組與的區(qū)別的一個特點是，最初綁定的時候是不會執(zhí)行的，要等到改變時才執(zhí)行監(jiān)聽計算。為一個對象，鍵是需要觀察的表達式，值是對應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項的對象適用場景一個數(shù)據(jù)影響多個數(shù)據(jù)。提問 1.深度watch與非深度watch的區(qū)別；2.watch對象與數(shù)組；3.watch與computed的區(qū)別； immediate FullNa...

crossoverJie 2019-08-23 18:05 評論0 收藏0
vue源碼-對于「計算屬性」的理解

摘要：源碼對于計算屬性的理解這是我最近學(xué)習(xí)源碼的一個個人總結(jié)和理解，所以可能并不適合每一位讀者本文的整體脈絡(luò)如下，首先盡可能去掉細節(jié)，對計算屬性源碼的大致實現(xiàn)有一個了解，然后舉一例子，分別談?wù)動嬎銓傩砸蕾囀占团砂l(fā)更新的流程。 vue源碼-對于「計算屬性」的理解這是我最近學(xué)習(xí)vue源碼的一個個人總結(jié)和理解，所以可能并不適合每一位讀者本文的整體脈絡(luò)如下，首先盡可能去掉細節(jié)，對計算屬性源碼的...

xiaochao 2019-08-23 13:10 評論0 收藏0