The use of computered in vue3. Since vue3 is compatible with the option API of vue2, you can directly use the writing of vue2. This article mainly introduces the new usage of computered in vue3, and compares the writing of vue2, so that you can quickly master the new usage of computered in vue3.
When using computed in a combined API, you need to first introduce: import { computed } from "vue". After introduction, there are two types of parameters that can be passed in computered: callback function and options. Let's see how it is used specifically?
1. Functional writing method
In vue2, computed is written:
computed:{
sum(){
return this.num1+ this.num2
}
}
In vue3, you can also write this way if you use the option API. The main thing is to 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 +
})
}
}
When calling computered, an arrow function is passed in, and the value is returned as sum . It's easier to use than before. If you need to calculate multiple attribute values, just call it directly. like:
let sum = computed(()=>{
return +
})
let mul = computed(()=>{
return *
})
This example is too simple, if you don't understand it, you can read the full example 1 later in the article.
2. How to write options
The computed attribute only has getter by default, and setter can also be provided when needed. In vue2, the usage is as follows:
computed:{
mul:{
get(){ // Triggered when num1 value changes return this.num1 * 10
},
set(value){ // Triggered when the mul value is changed this.num1 = value /10
}
}
}
The mul property is to enlarge num1 by 10. If the value of mul is modified, num1 will also change.
In vue3:
let mul = computed({
get:()=>{
return *10
},
set:(value)=>{
return = value/10
}
})
These two ways of writing are not the same. If you look closely, there is no big difference. The same is true for get and set calls.
In this example, the code is simple. If you don't understand it very much, you can check the full example 2 at the end of the article.
Complete Example 1:
<template>
<div>
{{num1}} + {{num2}} = {{sum}}
<br>
<button @click="num1++">num1Add it yourself</button>
<button @click="num2++">num2Add it yourself</button>
</div>
</template>
<script>
import { ref, computed } from "vue"
export default{
setup(){
const num1 = ref(1)
const num2 = ref(1)
let sum = computed(()=>{
return +
})
return{
num1,
num2,
sum
}
}
}
</script>
Complete Example 2:
<template>
<div>
{{num1}} + {{num2}} = {{sum}}<br>
<button @click="num1++">num1Add it yourself</button>
<button @click="num2++">num2Add it yourself</button>
<br>
{{num1}} * 10 = {{mul}}
<button @click="mul=100">Change the 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 +
})
let mul = computed({
get:()=>{
return *10
},
set:(value)=>{
return = value/10
}
})
return{
num1,
num2,
sum,
mul
}
}
}
</script>
3. Computed Transfer
How to write a parameter when computing attributes need to be passed in?
<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-hey'
])
const sltEle = computed( (index)=>{
('index',index);
})
return{
arr,sltEle
}
}
}
</script>
Write this directly, and when running, an error occurs: Uncaught TypeError: $ is not a function.
reason:
The computed property does not have a given return value. We call a function, and the computed internally 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){
('index',index);
}
})
This is the end of this article about the new usage of computered in vue3. For more related content on vue3 computered, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!