快捷導(dǎo)航

vue計算屬性computed方法內(nèi)傳參方式

更新時間：2022年10月21日 08:45:03 作者：騎上我心愛的小摩托

這篇文章主要介紹了vue計算屬性computed方法內(nèi)傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue計算屬性computed方法內(nèi)傳參

遇到頭疼的vue計算屬性傳參問題

經(jīng)過各種資料查找，親測有效

index.vue
<van-circle
? ? ? v-model="Ratedata[index].currentRate"
? ? ? ? ?color="#2462E8"
? ? ? ? ?fill="#fff"
? ? ? ? ?layer-color="#E6E6E6"
? ? ? ? ?:rate="Ratedata[index].rate"
? ? ? ? ?:text="text(index)"
? ? ? ? ?:speed="60"
? ? ? ? ?:clockwise="true"
? ? ? ? ?:stroke-width="40"
?/>

computed中text方法傳遞index，利用了閉包傳值

computed: {
? ? ? ? ? text() {
? ? ? ? ? ? ? return function (index) {
? ? ? ? ? ? ? ? ? return this.Ratedata[index].currentRate.toFixed(0) + '%';
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },

計算屬性computed與method的區(qū)別

目前工作中，很多公司都把vue作為自己的前端框架，vue的開發(fā)者和研究者也越來越多；不知道有多少人在研究使用vue的時候，對computed和methods到底有什么區(qū)別都不是特別明白。因為我們發(fā)現(xiàn)，想要實現(xiàn)一個需求，我們使用兩種方式中的任何一個，基本上都可以實現(xiàn)，那么我們平時應(yīng)該用什么更好呢？

什么是計算屬性？

提到計算屬性，就不得不先提一下Vue中的另一個內(nèi)容，它就是插值表達(dá)式。話不多說，先上一個案例，來見識一下何為插值表達(dá)式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{msg}}</p>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        msg:"vue的綁定語法，學(xué)名叫插值語法",
      }
    })
  </script>
</body>
</html>

運行結(jié)果：

上面這個案例就是一個Vue插值表達(dá)式的實例，通過這個例子，我們不難看出，插值表達(dá)式的語法相當(dāng)簡潔，使用起來也很方便。但是也不免暴露出它的一些缺點，最典型的就是無法進(jìn)行復(fù)雜邏輯運算。所以，Vue才會自帶計算屬性的功能。

話說到這里，大家應(yīng)該也就了解了，計算屬性的本質(zhì)就是輔助插值表達(dá)式來進(jìn)行復(fù)雜邏輯運算的。

computed實例

下面，我們通過一段代碼來具體看一下Vue中計算屬性的實際應(yīng)用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{msg}}</div>
      <div>{{reverseString}}</div>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "大家好，我是儒雅的烤地瓜，請多多指教",
        },
        methods: {},
        computed: {
          // 也可以使用對象方法的簡寫：reverseString(){...}
          reverseString: function () {
            return this.msg.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

運行結(jié)果：

上面這個案例就是一個computed的實例演示，我們通過代碼不難看出：第一個p標(biāo)記中的插值表達(dá)式顯示的是原文，而第二個p標(biāo)記中，顯示的則是經(jīng)過一系列API處理之后的文本內(nèi)容。

其中，所有的API操作都放在了computed中的reverseString方法中來實現(xiàn)，而最終插值表達(dá)式，只是將computed中處理完畢的屬性綁定給自己即可。這也從另一個側(cè)面證實了computed只負(fù)責(zé)進(jìn)行復(fù)雜邏輯運算的特點。

computed與method的區(qū)別

在Vue中，有computed和methods兩個模塊，且這兩個模塊都可以進(jìn)行方法的編寫。那么問題來了，二者之間到底有何區(qū)別？

首先，計算屬性是基于它們的依賴進(jìn)行緩存的，只有在依賴發(fā)生改變的時候，它們才會重新計算，否則，它們是不變的。換句話說，就是每次訪問計算屬性時，如果依賴沒有發(fā)生改變，它們可以立即返回結(jié)果，而不需要進(jìn)行復(fù)雜的邏輯運算。而methods中的方法，只要被觸發(fā)，被調(diào)用的方法就會立即執(zhí)行對應(yīng)函數(shù)，重新進(jìn)行渲染。

其次，計算屬性是具有緩存性質(zhì)的，而methods中的方法，則不具備緩存的能力，下面通過一個代碼片段來進(jìn)行演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 原始屬性輸出的結(jié)果 -->
      <p>{{msg}}</p>
      <!-- methodDome方法輸出的結(jié)果 -->
      <p>{{methodDome()}}</p>
      <!-- 計算屬性輸出的結(jié)果 -->
      <p>{{computedDome}}</p>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue"
        },
        methods: {
          // 也可以使用對象方法的簡寫：methodDome(){...}
          methodDome:function(){
            return this.msg.split(' ').reverse().join("===");
          }
        },
        computed: {
          // 也可以使用對象方法的簡寫：computedDome(){...}
          computedDome:function(){
            return this.msg.split(' ').reverse().join("===");
          }
        },
      });
    </script>
  </body>
</html>

運行結(jié)果：

通過上面這個案例，我們可以看出，computed和methods在輸出的結(jié)果上是一致的，只不過在計算結(jié)果這個過程中，有所不同。一個是利用依賴關(guān)系進(jìn)行緩存，只要依賴不變，值就不變；一個是被調(diào)用，重新執(zhí)行函數(shù)。

再舉一個類似例子，如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{reverseString}}</div>
      <div>{{reverseMessage()}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
      /* 計算屬性與方法的區(qū)別:計算屬性是基于依賴進(jìn)行緩存的，而方法不緩存 */
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Nihao",
          num: 100,
        },
        computed: {
          reverseString: function () {
            console.log("computed");
            // return this.msg.split('').reverse().join('');
            var total = 0;
            for (var i = 0; i <= this.num; i++) {
              total += i;
            }
            return total;
          },
        },
        methods: {
          reverseMessage: function () {
            console.log("methods");
            return this.msg.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

運行結(jié)果：

關(guān)于傳參問題

用過methods的同學(xué)一定知道，methods中定義的所有方法都是可以進(jìn)行參數(shù)傳遞的，但是computed中的方法可以進(jìn)行參數(shù)傳遞嗎？

其實，我們?nèi)绻屑?xì)看一下Vue的官方文檔，就會發(fā)現(xiàn)，官方文檔說明中，并不支持的在computed中進(jìn)行傳參操作。那么問題來了，假如現(xiàn)在就想在computed中進(jìn)行傳參操作該怎么做呢？

其實也很簡單，在JavaScript語言中，我們提到過閉包這種設(shè)計，它的主要作用，不就是用來訪問其他函數(shù)內(nèi)部的變量，然后返回操作結(jié)果。所以，我們可以利用閉包來實現(xiàn)。

:data="closure(item,itemName,blablaParams)"
 
computed: {
   closure(){
      return function(a,b,c){
        // do something
        return data
      }
    }
}

總結(jié)：通過上面概述我們不難發(fā)現(xiàn)，Vue的computed主要是用來進(jìn)行組件復(fù)雜邏輯運算的，輔助插值表達(dá)式來簡化結(jié)構(gòu)性代碼，讓開發(fā)人員更專注與數(shù)據(jù)層的操作。

同時，對于一些運算復(fù)雜，且依賴變化較小的功能塊，也可以從methods中移到computed中，來提高代碼的運行速度，在方法傳參方面，可以利用JavaScript的閉包設(shè)計來完成傳參。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: