In-depth analysis of Vue's computed property API (computed)

The expression syntax of Vue template only supports a single expression for simple operations; for complex logical calculations, calculated properties should be used computed.

Computed can rely on (calculate) the data of props, data, and vuex, that is, you can declare a calculated attribute to respond to data changes in props/data/vuex and return a result that has undergone some calculation. [Related recommendations: vue.js video tutorial]

How to write calculated attributes

The attribute value of the computed attribute can be a function or object
1. The attribute value is function. At this time, the calculated attribute only has getter

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

2. The attribute value is an object
When the computed attribute value is an object, the object's attribute attribute can be configured with the get and set methods, through This approach provides a setter for a computed property.

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

Computed property supportCache

When the view changes but the data on which the calculated property depends does not change , the value will be retrieved directly from the cache.

In the following example, the calculated property messageLength and the method getMessageLength implement the same function. When updating the view by clicking the button, you will find that the method getMessageLength will be executed. Obviously in this case, using the calculated property is more performant than the method. good.

<div id="app">
    {{messageLength}}-{{getMessageLength()}}
    <button @click="onClick">点击{{i}}</button>
</div>
<script>
let vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello world&#39;,
    i: 0
  },
  computed: {
    messageLength () {
      console.log(&#39;messageLength执行了&#39;)
      return this.message.length
    }
  },
  methods: {
    getMessageLength () {
      console.log(&#39;getMessageLength执行了&#39;)
      return this.message.length
    },
    onClick () {
      this.i++
    }
  }
})
</script>

Computed property parameters passing

In a Vue instance, calculated properties exist as properties. If you want to pass parameters, you need to use a closure to change the property value to a function

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

In this case, using a computed property is equivalent to using a method.

Computed property and watch property

Computed properties can respond to data changes on the Vue instance, and watch properties can also observe and respond to data changes on the Vue instance.
Watch can monitor data changes in props, data and computed, and execute a function.
When used:
computed is used for calculation. It requires a result to be returned. There is no need to add parentheses when calling. It will automatically cache based on one or more dependencies . If the dependency No change, computed will not automatically calculate;
watch is used for monitoring, and can only monitor one data at a time . If the monitored data changes, execute the function. It has two options:

• immediate indicates whether to execute this function when the component is rendered for the first time. The default is false.
• deep means monitoring changes in the internal attributes of an object, and the default is false.

Implementing asynchronous calculation

1. The computed attribute cannot return the result of an asynchronous operation, but You can rely on the data in Vuex, so you can get the result of the asynchronous operation by returning store.state

2. Asynchronous calculation of attributes can be implemented through the vue-async-computed plug-in. The list attribute will be assigned a Promise, obviously Not the result we need

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

Skillfully use computed properties to calculate props

The following example implements props Two-way binding

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)
    }
  }
 }

The above is the detailed content of In-depth analysis of Vue's computed property API (computed). For more information, please follow other related articles on the PHP Chinese website!