Summary of new usage examples of computed in Vue3

The use of computed in vue3. Since vue3 is compatible with vue2's optional API, you can directly use vue2's writing method. This article mainly introduces the new usage of computed in vue3, and compares it with the writing method in vue2, so that you can quickly master the new usage of computed in vue3.

When using computed in the combined API, you need to import it first: import { computed } from "vue". After the introduction, there are two types of parameters that can be passed into computed: callback function and options. See how it is used in detail?

1. Functional writing

In vue2, computed is written as:

computed:{
 sum(){
  return this.num1+ this.num2
 }
}

In vue3, if you use the optional API, you can also write it this way. Mainly look at the use of the combined API.

Example 1: Sum

import { ref, computed } from "vue"
export default{
 setup(){
  const num1 = ref(1)
  const num2 = ref(1)
  let sum = computed(()=>{
   return num1.value + num2.value
  })
 }
}

When computed is called, an arrow function is passed in and the return value is used as sum. It is easier to use than before. If you need to calculate multiple attribute values, just call it directly. like:

let sum = computed(()=>{
 return num1.value + num2.value
 })
let mul = computed(()=>{
 return num1.value * num2.value
 })

This example is too simple. If you don’t understand it, you can read the complete example 1 at the end of the article.

2. Options Writing

Computed properties have only getters by default, but setters can also be provided when needed. The usage in vue2 is as follows:

computed:{
 mul:{
  get(){ // Triggered when the value of num1 changes return this.num1 * 10
  },
  set(value){ // Triggered when the mul value is changed this.num1 = value /10
  }
 }
}

The mul attribute amplifies num1 by 10. If the value of mul is modified, num1 will also change accordingly.

In vue3:

let mul = computed({
 get:()=>{
  return num1.value *10
 },
 set:(value)=>{
  return num1.value = value/10
 }
})

These two ways of writing are not quite the same, but if you look closely you will see that there is not much difference, and the get and set calls are also the same.

The code in this example is simple. If you don’t quite understand it, you can check the complete example 2 at the end of the article.

Complete example 1:

<template>
 <div>
  {{num1}} + {{num2}} = {{sum}}
  <br>
  <button @click="num1++">num1 self-increment</button>
  <button @click="num2++">num2 self-increment</button>
 </div>
</template>
<script>
import { ref, computed } from "vue"
export default{
 setup(){
  const num1 = ref(1)
  const num2 = ref(1)
  let sum = computed(()=>{
   return num1.value + num2.value
  })
  return {
   num1,
   num2,
   sum
  }
 }
}
</script>

Complete Example 2:

<template>
 <div>
  {{num1}} + {{num2}} = {{sum}}<br>
  <button @click="num1++">num1 self-increment</button>
  <button @click="num2++">num2 self-increment</button>
  <br>
  {{num1}} * 10 = {{mul}}
  <button @click="mul=100">Change value</button>
 </div>
</template>
<script>
import { ref, computed } from "vue"
export default{
 setup(){
  const num1 = ref(1)
  const num2 = ref(1)

  let sum = computed(()=>{
   return num1.value + num2.value
  })
  let mul = computed({
   get:()=>{
    return num1.value *10
   },
   set:(value)=>{
    return num1.value = value/10
   }
  })
  return {
   num1,
   num2,
   sum,
   mul
  }
 }
}
</script>

3. Computed parameter passing

How to write a parameter when calculating a property?

<template>
 <div>
  <div v-for="(item,index) in arr" :key="index" @click="sltEle(index)">
   {{item}}
  </div>
 </div>
</template>
<script>
import { ref, computed, reactive } from "vue"
export default{
 setup(){
  const arr = reactive([
   'Haha', 'Hehe'
  ])
  const sltEle = computed( (index)=>{
   console.log('index',index);  
  })
  return {
   arr,sltEle
  }
 }
}
</script>

If you write it directly like this, an error will occur when running: Uncaught TypeError: $setup.sltEle is not a function.

reason:

The computed property does not have a given return value. We call a function, but computed does not return a function, so an error will be reported: sltEle is not a function.

Solution:

A function needs to be returned inside the computed property. Modify the code as follows:

const sltEle = computed( ()=>{
 return function(index){
  console.log('index',index);
 }
})

This is the end of this article about the new usage of computed in vue3. For more relevant vue3 computed usage content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!