内容摘要：vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2

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);  } }) 服务器托管