Vue的計(jì)算屬性API怎么寫

這篇文章主要講解了“Vue的計(jì)算屬性API怎么寫”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue的計(jì)算屬性API怎么寫”吧！

Vue模板的表達(dá)式語法僅支持單個(gè)表達(dá)式，用于簡單運(yùn)算；對(duì)于復(fù)雜的邏輯計(jì)算應(yīng)當(dāng)使用計(jì)算屬性computed。

computed可以依賴（計(jì)算）props、data、vuex的數(shù)據(jù)，即可以聲明了一個(gè)計(jì)算屬性，令其響應(yīng)props/data/vuex的數(shù)據(jù)變化，返回一個(gè)經(jīng)過某種計(jì)算的結(jié)果。

計(jì)算屬性的寫法

computed屬性的屬性值可以是函數(shù)或者對(duì)象
1、屬性值是函數(shù)，這時(shí)候計(jì)算屬性只有 getter

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

2、屬性值是對(duì)象
computed的屬性值是對(duì)象時(shí)，對(duì)象的屬性屬性可以配置get和set方法，通過這種方式可以給計(jì)算屬性提供一個(gè) setter。

fullName: {
   get () {
     return this.firstName + ' ' + this.lastName   },
   set (newValue) {
     const names = newValue.split(' ')
     this.firstName = names[0]
     this.lastName = names[names.length - 1]
   }
 }

計(jì)算屬性支持緩存

在視圖發(fā)生了變化，而計(jì)算屬性所依賴的數(shù)據(jù)沒有變化的情況下，會(huì)直接從緩存中取值。

下面的例子中計(jì)算屬性messageLength和方法getMessageLength實(shí)現(xiàn)相同的功能，在通過點(diǎn)擊按鈕更新視圖時(shí)，會(huì)發(fā)現(xiàn)方法getMessageLength會(huì)被執(zhí)行，顯然在這種情況下使用計(jì)算屬性比方法性能更好。

<div id="app">
    {{messageLength}}-{{getMessageLength()}}
    <button @click="onClick">點(diǎn)擊{{i}}</button>
</div>
<script>
let vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello world',
    i: 0
  },
  computed: {
    messageLength () {
      console.log('messageLength執(zhí)行了')
      return this.message.length
    }
  },
  methods: {
    getMessageLength () {
      console.log('getMessageLength執(zhí)行了')
      return this.message.length
    },
    onClick () {
      this.i++
    }
  }
})
</script>

計(jì)算屬性傳參

在Vue實(shí)例中，計(jì)算屬性以屬性的方式存在，如果要傳參，需要使用閉包將屬性值改為一個(gè)函數(shù)

computed: {
  fullName () {
    return function (maxLength) {
      return (this.firstName + ' ' + this.lastName).substring(0, maxLength)
    }
  }}

這種情況下，使用計(jì)算屬性與使用方法等效。

computed屬性與watch屬性

計(jì)算屬性可以響應(yīng)Vue 實(shí)例的數(shù)據(jù)變動(dòng)，watch屬性同樣可以觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)。
watch可以監(jiān)聽props、data和computed中的數(shù)據(jù)變化，并執(zhí)行一個(gè)函數(shù)。
使用時(shí)：
computed是用來計(jì)算的，它要求返回一個(gè)結(jié)果，在調(diào)用的時(shí)候不需要加括號(hào)，它會(huì)根據(jù)一個(gè)或多個(gè)依賴自動(dòng)緩存，如果依賴不變，computed不會(huì)自動(dòng)計(jì)算；
watch是用來監(jiān)聽的，一次只能監(jiān)聽一個(gè)數(shù)據(jù)，監(jiān)聽的數(shù)據(jù)變化了，就去執(zhí)行函數(shù)，它有兩個(gè)選項(xiàng)：

• immediate表示在組件第一次渲染的時(shí)候是否要執(zhí)行這個(gè)函數(shù)，默認(rèn)為false。

• deep表示監(jiān)聽一個(gè)對(duì)象內(nèi)部屬性的變化，默認(rèn)為false.

實(shí)現(xiàn)異步計(jì)算

一、computed屬性無法返回異步操作的結(jié)果，但可以依賴Vuex中的數(shù)據(jù)，故通過返回store.state可以獲得異步操作的結(jié)果

二、通過vue-async-computed插件可以實(shí)現(xiàn)異步計(jì)算屬性,list屬性將被賦值為一個(gè)Promise,顯然不是我們需要的結(jié)果

import Vue from 'vue'import AsyncComputed from 'vue-async-computed'import axios from 'axios'Vue.use(AsyncComputed)export default {
  name: 'MediaIndex',
  data () {
    return {
      pageNo: 1
    }
  },
  computed: {
    list () {
      return axios(`https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/products?pageNo=${this.pageNo}`)
        .then(res => res.data)
    }
  },
  asyncComputed: {
    asyncList () {
      return axios(`https://www.fastmock.site/mock/d6b39fde63cbe98a4f2fb92ff5b25a6d/api/products?pageNo=${this.pageNo}`)
        .then(res => res.data)
    }
  }}

vue-async-computed

巧用computed屬性計(jì)算props

下面的例子實(shí)現(xiàn)props的雙向綁定

export default {
  name: 'Pagination',
  props: {
   page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    }
  },
 computed: {
  currentPage: {
    get() {
      return this.page    },
    set(val) {
      this.$emit('update:page', val)
    }
  },
  pageSize: {
    get() {
      return this.limit    },
    set(val) {
      this.$emit('update:limit', val)
    }
  }
 }

感謝各位的閱讀，以上就是“Vue的計(jì)算屬性API怎么寫”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue的計(jì)算屬性API怎么寫這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！