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

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

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

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

遇到頭疼的vue計(jì)算屬性傳參問(wèn)題

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

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) + '%';
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },

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

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

什么是計(jì)算屬性？

提到計(jì)算屬性，就不得不先提一下Vue中的另一個(gè)內(nèi)容，它就是插值表達(dá)式。話不多說(shuō)，先上一個(gè)案例，來(lái)見(jiàn)識(shí)一下何為插值表達(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的綁定語(yǔ)法，學(xué)名叫插值語(yǔ)法",
      }
    })
  </script>
</body>
</html>

運(yùn)行結(jié)果：

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

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

computed實(shí)例

下面，我們通過(guò)一段代碼來(lái)具體看一下Vue中計(jì)算屬性的實(shí)際應(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: "大家好，我是儒雅的烤地瓜，請(qǐng)多多指教",
        },
        methods: {},
        computed: {
          // 也可以使用對(duì)象方法的簡(jiǎn)寫(xiě)：reverseString(){...}
          reverseString: function () {
            return this.msg.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

運(yùn)行結(jié)果：

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

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

computed與method的區(qū)別

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

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

其次，計(jì)算屬性是具有緩存性質(zhì)的，而methods中的方法，則不具備緩存的能力，下面通過(guò)一個(gè)代碼片段來(lái)進(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>
      <!-- 計(jì)算屬性輸出的結(jié)果 -->
      <p>{{computedDome}}</p>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "Hello Vue"
        },
        methods: {
          // 也可以使用對(duì)象方法的簡(jiǎn)寫(xiě)：methodDome(){...}
          methodDome:function(){
            return this.msg.split(' ').reverse().join("===");
          }
        },
        computed: {
          // 也可以使用對(duì)象方法的簡(jiǎn)寫(xiě)：computedDome(){...}
          computedDome:function(){
            return this.msg.split(' ').reverse().join("===");
          }
        },
      });
    </script>
  </body>
</html>

運(yùn)行結(jié)果：

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

再舉一個(gè)類(lèi)似例子，如下：

<!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>
      /* 計(jì)算屬性與方法的區(qū)別:計(jì)算屬性是基于依賴(lài)進(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>

運(yùn)行結(jié)果：

關(guān)于傳參問(wèn)題

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

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

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

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

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

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

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

您可能感興趣的文章: