快捷導(dǎo)航

Vue計(jì)算屬性的使用

更新時(shí)間：2017年08月04日 14:55:54 作者：BLUE

本篇文章主要介紹了Vue計(jì)算屬性的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

一、計(jì)算屬性

1.1 概述

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

<body>
  <div id="app">
    <h1>{{name.toUpperCase()}}</h1>
    <!-- <h1>BLUE</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      name: 'blue'
    }
  })
</script>

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

1.2 計(jì)算屬性語(yǔ)法

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

<body>
  <div id="app">
    <h1>{{rs}}</h1>
    <!-- <h1>BLUE LOVE PINK</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      hs: 'BLUE',
      wf: "PINK"
    },
    computed: {
      rs:function(){
        return `${this.hs} LOVE ${this.wf}`
      }
    }
  })
</script>

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

可能剛開(kāi)始對(duì)計(jì)算屬性會(huì)有些疑惑，比如上面的例子我把代碼寫(xiě)成下面這樣子也是可以的

<body>
  <div id="app">
    <h1>{{hs}} LOVE {{wf}}</h1>
    <!-- <h1>BLUE LOVE PINK</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      hs: 'BLUE',
      wf: "PINK"
    }
  })
</script>

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

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

1.3 計(jì)算屬性和過(guò)濾器的比較

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

<body>
  <div id="app">
    <h1>{{hs | lover}}</h1>
    <!-- <h1>BLUE LOVE PINK</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      hs: 'BLUE',
    },
    filters: {
      lover(value){
        return `${value} LOVE PINK`
      }
    }
  })
</script>

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

1.4 計(jì)算屬性和Methods的比較

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

<body>
  <div id="app">
    <h1>{{rs}}</h1>
    <!-- <h1>EULB</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      name: 'BLUE',
    },
    computed: {
      rs: function () {
        return [...this.name].reverse().join('');
      }
    }
  })
</script>

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

<body>
  <div id="app">
    <h1>{{ rs() }}</h1>
    <!-- <h1>EULB</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      name: 'BLUE',
    },
    methods: {
      rs() {
        return [...this.name].reverse().join('');
      }
    }
  })
</script>

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

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

1.5 計(jì)算屬性和Watch的比較

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

<body>
  <div id="app">
    <h1>{{fullName}}</h1>
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      firstName: 'Jack',
      lastName: 'Blue',
      fullName: 'Jack Blue'
    },
    watch: {
      firstName: function (val) {
        this.fullName = val + ' ' + this.lastName
      },
      lastName: function (val) {
        this.fullName = this.firstName + ' ' + val
      }
    }
  })
</script>

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

<body>
  <div id="app">
    <h1>{{fullName}}</h1>
    <!-- <h1>Jack Blue</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      firstName: 'Jack',
      lastName: 'Blue',
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

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

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

1.6 計(jì)算屬性的setter

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

<body>
  <div id="app">
    <h1>{{fullName}}</h1>
    <!-- <h1>Jack Blue</h1> -->
  </div>
</body>

<script>
  let vm = new Vue({
    el: "#app",
    data: {
      firstName: 'Jack',
      lastName: 'Blue',
    },
    computed: {
      fullName: {
        //getter
        get() {
          return this.firstName + ' ' + this.lastName
        },
        //setter
        set(newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
  })
</script>

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: