Vue3学习笔记——Computed在Vue3中的新用法

vue3中computed的使用，由于vue3兼容vue2的可选API，可以直接使用vue2的写法。本文主要介绍computed在vue3中的新用法。对比vue2中的写法，可以快速掌握vue3中computed的新用法。在组合API中使用computed时，需要引入：import{computed}from"vue"。引入之后，computed可以传入的参数有两种：回调函数和选项。来看看具体是怎么用的？1.vue2中函数式的写法，computed的写法：computed:{sum(){returnthis.num1+this.num2}}vue3中，如果使用optionalAPI，也可以这样写，主要看一下组合API的使用。示例1：sumimport{ref,computed}from"vue"exportdefault{setup(){constnum1=ref(1)constnum2=ref(1)letsum=computed(()=>{returnnum1.value+num2.value})}}调用computed时，传入一个箭头函数，返回值为sum。它比以前更容易使用。如果需要计算多个属性值，可以直接调用。如：letsum=computed(()=>{returnnum1.value+num2.value})letmul=computed(()=>{returnnum1.value*num2.value})这个例子太简单了，如果你不会理解它，请参阅下面的文章阅读完整的示例1。2.options写方法计算属性默认只有getter，需要的时候也可以提供setter。vue2中的用法如下：computed:{mul:{get(){//当num1的值改变时触发returnthis.num1*10},set(value){//当num1=value/10时触发改变mul的值}}}mul属性是将num1扩大10，如果修改mul的值，num1也会随之改变。vue3中：letmul=computed({get:()=>{returnnum1.value*10},set:(value)=>{returnnum1.value=value/10}})不一样，仔细观察有区别不大，get和set调用是相同的。这个例子中的代码很简单。不太理解的可以查看文末的完整示例2。完整例子1：完整例子2：3.如何写计算属性传入参数？直接这样写，运行时报错：UncaughtTypeError:$setup.sltEleisnotafunction原因：computed计算属性没有给定返回值，而我们所说的是A函数，而computed内部返回的不是函数，所以会报错：sltEleisnotafunction。解决方案：需要在计算属性中返回一个函数。修改代码如下：constsltEle=computed(()=>{returnfunction(index){console.log('index',index);}})