For the use of computed tomography in VUe3, vue3 is compatible with the optional API of VUe2, so we can directly use the writing method of VUe2. This article mainly introduces the new use of computed tomography in VUe3, and compares it with the writing method in VUe2. Get up to speed on new uses of computed in VUE3.

To use computed in the combined API, import {computed} from “vue”. After the introduction of computed, there are two kinds of parameters that can be passed in: callback functions and options. How exactly does it work?

One, functional writing

In VUE2, computed:

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

You can also do this with vue3 if you use the optional API. Let’s look at the use of the composite 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
  })
 }
}
Copy the code

When computed is called, an arrow function is passed in that returns the value sum. Easier to use than before. If you need to evaluate multiple attribute values, just call it. Such as:

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

This example is too simple to follow, read the full example 1 later in this article.

B. Options

Computed properties have only getters by default, and setters can be provided when needed. It is used as follows in vue2:

Computed :{mul:{get(){return this.num1 * 10}, set(value){// This. num1 = value /10}}}Copy the code

The mul attribute magnifies NUM1 by 10. If you change the value of mul, NUM1 changes.

In vue3:

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

The two are not quite the same, and if you look closely, there’s not much difference, as are get and set calls.

The code in this example is simple, but if you don’t understand it, see the full example 2 later in this article.

Complete example 1:

< template > < div > {{num1}} + {{num2}} = {{sum}} < br > < button @ click = "num1 + +" > num1 since add < / button > < button </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>Copy the code

Complete example 2:

< template > < div > {{num1}} + {{num2}} = {{sum}} < br > < button @ click = "num1 + +" > num1 since add < / button > < button @ click = "num2 + +" > num2 since add < / button > < br > * 10 = {{num1}} {{the mul}} < button @ click = "the mul = 100" > change value of < / 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>Copy the code

Three, computed ginseng transmission

So to evaluate a property you need to pass in an argument how do you write that?

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

TypeError: $setup.sltEle is not a function Uncaught TypeError: $setup.sltEle is not a function

The reason:

For computed attributes, no return value is given. We are calling a function, and computed internally does not return a function, so an error is reported: sltEle is not a function.

Solutions:

You need to return a function inside the evaluated property. Modify the code as follows:

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

Well xiaobian today’s article is over, like me can point a concern oh!