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

When using computed in the composite API, you need to import {computed} from "Vue". After the introduction, computed can pass in two parameters: callback function and options. See how it is used?

1, Functional writing

In vue2, computed is written as follows:

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

 

In vue3, you can also write this if you use the optional API. You can mainly look at the use of the combined API.

Example 1: summation

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 sum. It is easier to use than before. If you need to calculate multiple attribute values, you can call it directly. For example:

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

 

This example is too simple to understand. You can read the complete example 1 at the end of the article.

2, options writing

Only getter s are available for calculation properties by default, and setter s can be provided when necessary. In vue2, it is used as follows:

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

 

The mul attribute is to enlarge num1 by 10. If you modify the value of mul, num1 will also change.

In vue3:

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

 

These two methods are not the same. Careful observation shows little difference. get and set calls are the same.

In this example, the code is simple. If you don't understand it, you can see the complete example 2 later in the article.

Complete example 1:

<template>
 <div>
  {{num1}} + {{num2}} = {{sum}}
  <br>
  <button @click="num1++">num1 Self addition</button>
  <button @click="num2++">num2 Self addition</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 addition</button>
  <button @click="num2++">num2 Self addition</button>
  <br>
  {{num1}} * 10 = {{mul}}
  <button @click="mul=100">Modified 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 parameters

How to write a parameter that needs to be passed in to calculate the attribute?

<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([
   'ha-ha','hey'
  ])
  const sltEle = computed( (index)=>{
   console.log('index',index);  
  })
  return{
   arr,sltEle
  }
 }
}
</script>

 

Write this directly. When running, an error occurs: uncaught typeerror: $setup.sltlel is not a function.

reason:

The calculated calculation property does not give a return value. We call a function, but the internal return of calculated is not a function, so an error will be reported: sltlel is not a function.

terms of settlement:

You need to return a function inside the calculated property. The modification code is as follows:

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

Well, Xiaobian, this is the end of today's article. Those who like me can pay attention!