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

开发 前端
这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法。

[[439236]]

vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 中的写法,让您快速掌握 vue3 中 computed 的新用法。

组合式 API 中使用 computed 时,需要先引入:import { computed } from "vue"。引入之后 computed 可以传入的参数有两种:回调函数和 options 。具体看看它是如何使用的?

一、函数式写法

在vue2中,computed 写法:

  1. computed:{ 
  2.  sum(){ 
  3.   return this.num1+ this.num2 
  4.  } 

 在vue3 如果使用选项式API也可以这样写,主要看下组合式API的使用。

示例1:求和

  1. import { ref, computed } from "vue" 
  2. export default
  3.  setup(){ 
  4.   const num1 = ref(1) 
  5.   const num2 = ref(1) 
  6.   let sum = computed(()=>{ 
  7.    return num1.value + num2.value 
  8.   }) 
  9.  } 

 调用 computed 时, 传入了一个箭头函数,返回值作为 sum 。相比之前,使用更加简单了。如果需要计算多个属性值,直接调用就可以。如:

  1. let sum = computed(()=>{ 
  2.  return num1.value + num2.value 
  3.  }) 
  4. let mul = computed(()=>{ 
  5.  return num1.value * num2.value 
  6.  }) 

 该示例过于简单,看不明白的可在文章后面阅读完整实例1。

二、options 写法

计算属性默认只有 getter ,在需要的时候也可以提供 setter 。在vue2中用法如下:

  1. computed:{ 
  2.  mul:{ 
  3.   get(){ // num1值改变时触发 
  4.    return this.num1 * 10 
  5.   }, 
  6.   set(value){ // mul值被改变时触发 
  7.    this.num1 = value /10 
  8.   } 
  9.  } 

 mul 属性是 给num1 放大10,如果修改 mul 的值,则 num1 也随之改变。

在 vue3 中 :

  1. let mul = computed({ 
  2.  get:()=>{ 
  3.   return num1.value *10 
  4.  }, 
  5.  set:(value)=>{ 
  6.   return num1.value = value/10 
  7.  } 
  8. }) 

 这两种写法不太一样,仔细观察区别不大,get 和 set 调用也是一样的。

在此示例中代码简单,如果没太理解,可查看文章后面的完整实例2。

完整实例1:

  1. <template> 
  2.  <div> 
  3.   {{num1}} + {{num2}} = {{sum}} 
  4.   <br> 
  5.   <button @click="num1++">num1自加</button> 
  6.   <button @click="num2++">num2自加</button> 
  7.  </div> 
  8. </template> 
  9. <script> 
  10. import { ref, computed } from "vue" 
  11. export default
  12.  setup(){ 
  13.   const num1 = ref(1) 
  14.   const num2 = ref(1) 
  15.   let sum = computed(()=>{ 
  16.    return num1.value + num2.value 
  17.   }) 
  18.   return
  19.    num1, 
  20.    num2, 
  21.    sum 
  22.   } 
  23.  } 
  24. </script> 

 完整实例2:

  1. <template> 
  2.  <div> 
  3.   {{num1}} + {{num2}} = {{sum}}<br> 
  4.   <button @click="num1++">num1自加</button> 
  5.   <button @click="num2++">num2自加</button> 
  6.   <br> 
  7.   {{num1}} * 10 = {{mul}} 
  8.   <button @click="mul=100">改值</button> 
  9.  </div> 
  10. </template> 
  11. <script> 
  12. import { ref, computed } from "vue" 
  13. export default
  14.  setup(){ 
  15.   const num1 = ref(1) 
  16.   const num2 = ref(1) 
  17.  
  18.   let sum = computed(()=>{ 
  19.    return num1.value + num2.value 
  20.   }) 
  21.   let mul = computed({ 
  22.    get:()=>{ 
  23.     return num1.value *10 
  24.    }, 
  25.    set:(value)=>{ 
  26.     return num1.value = value/10 
  27.    } 
  28.   }) 
  29.   return
  30.    num1, 
  31.    num2, 
  32.    sum
  33.    mul 
  34.   } 
  35.  } 
  36. </script> 

三、computed 传参

计算属性需要传入一个参数怎么写呢?

  1. <template> 
  2.  <div> 
  3.   <div v-for="(item,index) in arr" :key="index" @click="sltEle(index)"
  4.    {{item}} 
  5.   </div> 
  6.  </div> 
  7. </template> 
  8. <script> 
  9. import { ref, computed,reactive } from "vue" 
  10. export default
  11.  setup(){ 
  12.   const arr = reactive([ 
  13.    '哈哈','嘿嘿' 
  14.   ]) 
  15.   const sltEle = computed( (index)=>{ 
  16.    console.log('index',index);   
  17.   }) 
  18.   return
  19.    arr,sltEle 
  20.   } 
  21.  } 
  22. </script> 

直接这样写,运行的时候,出现错误:Uncaught TypeError: $setup.sltEle is not a function。

原因:

computed 计算属性并没有给定返回值,我们调用的是一个函数,而 computed 内部返回的并不是一个函数,所以就会报错:sltEle is not a function。

解决办法:

需要在计算属性 内部返回一个函数。修改代码如下:

  1. const sltEle = computed( ()=>{ 
  2.  return function(index){ 
  3.   console.log('index',index); 
  4.  } 
  5. }) 

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-12-01 08:11:44

Vue3 插件Vue应用

2021-12-07 05:44:45

Vue 3 Watch WatchEffect

2023-12-11 07:34:37

Computed计算属性Vue3

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2021-12-02 05:50:35

Vue3 插件Vue应用

2021-11-16 08:50:29

Vue3 插件Vue应用

2021-12-29 07:51:21

Vue3 插件Vue应用

2022-06-26 00:00:02

Vue3响应式系统

2023-11-29 08:49:31

Vue.jsData 函数

2022-07-14 08:22:48

Computedvue3

2024-05-27 08:39:17

Vue3变量响应式

2021-11-17 08:24:47

Vue3 插件Vue应用

2020-09-19 21:15:26

Composition

2023-12-14 08:25:14

WatchVue.js监听数据

2021-12-09 08:49:14

Vue 3 Provide Inject

2021-11-26 05:59:31

Vue3 插件Vue应用

2022-07-20 11:13:05

前端JSONVue3

2022-06-21 12:09:18

Vue差异

2024-03-21 08:34:49

Vue3WebSocketHTTP
点赞
收藏

51CTO技术栈公众号