vue3 中 computed 新用法示例小结
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法。
组合式 API 中使用 computed 时，需要先引入：import { computed } from "vue"。引入之后 computed 可以传入的参数有两种：回调函数和 options 。具体看看它是如何使用的？
一、函数式写法
在vue2中，computed 写法：
computed:{
sum(){
return this.num1+ this.num2
}
}
在vue3 如果使用选项式API也可以这样写，主要看下组合式API的使用。
示例1：求和
import { ref, computed } from "vue"
export default{
setup(){
const num1 = ref(1)
const num2 = ref(1)
let sum = computed(()=>{
return num1.value + num2.value
})
}
}
调用 computed 时， 传入了一个箭头函数，返回值作为 sum 。相比之前，使用更加简单了。如果需要计算多个属性值，直接调用就可以。如：
let sum = computed(()=>{
return num1.value + num2.value
})
let mul = computed(()=>{
return num1.value * num2.value
})
该示例过于简单，看不明白的可在文章后面阅读完整实例1。
二、options 写法
计算属性默认只有 getter ，在需要的时候也可以提供 setter 。在vue2中用法如下：
computed:{
mul:{
get(){ // num1值改变时触发
return this.num1 * 10
},
set(value){ // mul值被改变时触发
this.num1 = value /10
}
}
}
mul 属性是 给num1 放大10，如果修改 mul 的值，则 num1 也随之改变。
在 vue3 中 ：
let mul = computed({
get:()=>{
return num1.value *10
},
set:(value)=>{
return num1.value = value/10
}
})
这两种写法不太一样，仔细观察区别不大，get 和 set 调用也是一样的。
在此示例中代码简单，如果没太理解，可查看文章后面的完整实例2。
完整实例1：
<template>
<div>
{{num1}} + {{num2}} = {{sum}}
<br>
<button @click="num1++">num1自加</button>
<button @click="num2++">num2自加</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>
完整实例2：
<template>
<div>
{{num1}} + {{num2}} = {{sum}}<br>
<button @click="num1++">num1自加</button>
<button @click="num2++">num2自加</button>
<br>
{{num1}} * 10 = {{mul}}
<button @click="mul=100">改值</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>
三、computed 传参
计算属性需要传入一个参数怎么写呢？
<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([
'哈哈','嘿嘿'
])
const sltEle = computed( (index)=>{
console.log('index',index);
})
return{
arr,sltEle
}
}
}
</script>
直接这样写，运行的时候，出现错误：Uncaught TypeError: $setup.sltEle is not a function。
原因：
computed 计算属性并没有给定返回值，我们调用的是一个函数，而 computed 内部返回的并不是一个函数，所以就会报错：sltEle is not a function。
解决办法：
需要在计算属性 内部返回一个函数。修改代码如下：
const sltEle = computed( ()=>{
return function(index){
console.log('index',index);
}
})
到此这篇关于vue3 中 computed 新用法的文章就介绍到这了,更多相关vue3 computed 用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了TypeScript踩坑之TS7053的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文主要介绍了el-form-item表单label添加提示图标的实现,我们将了解El-Form-Item的基本概念和用法,及添加提示图标以及如何自定义图标样式,感兴趣的可以了解一下2023-11-11
v-slot和slot、slot-scope之间相互替换实例
这篇文章主要介绍了v-slot和slot、slot-scope之间相互替换实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文主要介绍了Vue3中简单实现动态添加路由，，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
Vue3中element-plus全局使用Icon图标的过程详解
我们在用vue开发网站的时候,往往图标是起着很重要的作,这篇文章主要给大家介绍了关于Vue3中element-plus全局使用Icon图标的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
这篇文章主要为大家详细介绍了Vue的样式绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，是一个第三方插件，第三方异步请求工具库，这篇文章主要介绍了Axios在vue项目中的封装方法,需要的朋友可以参考下2022-10-10
Vue3中getCurrentInstance、页面中route和router的获取实现方式
这篇文章主要介绍了Vue3中getCurrentInstance、页面中route和router的获取实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了从零到一详聊如何创建Vue工程及遇到的常见问题 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
今天小编就为大家分享一篇vue webpack开发访问后台接口全局配置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论