Vue computed 和 watch

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

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

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

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

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

 單價：{{price}}
 數量：
 總價：{{sum}}
 運費：{{free}}
 應付：{{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)聽的函數。
監(jiān)聽屬性變化，一般是用于跟數據無關的業(yè)務邏輯操作。
計算屬性，適用于屬性發(fā)生變化后，需要計算得到新的數據。

     
            a: 

            b: 

            總和：{{count}}
            
            



            
            name: 

            age:

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


            a: 

            b: 

            總和：{{count}}
            
            



            
            name: 

            age:

GPU云服務器云服務器 webrtc和vue computed computer COMPUTE

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

轉載請注明本文地址：http://m.hztianpu.com/yun/107996.html

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

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

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

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

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

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

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

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

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

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

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

摘要：源碼對于計算屬性的理解這是我最近學習源碼的一個個人總結和理解，所以可能并不適合每一位讀者本文的整體脈絡如下，首先盡可能去掉細節(jié)，對計算屬性源碼的大致實現(xiàn)有一個了解，然后舉一例子，分別談談計算屬性依賴收集和派發(fā)更新的流程。 vue源碼-對于「計算屬性」的理解這是我最近學習vue源碼的一個個人總結和理解，所以可能并不適合每一位讀者本文的整體脈絡如下，首先盡可能去掉細節(jié)，對計算屬性源碼的...

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