这篇文章给大家介绍vue3 中computed 新用法的示例分析，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法。
组合式 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 新用法的示例分析就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
