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 用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-11-24

浅谈vue3中effect与computed的亲密关系

在我刚看完vue3响应式的时候,心中就有一个不可磨灭的谜团,让我茶不思饭不想,总想生病.那么这个谜团是什么呢?就是在响应式中一直穿行在tranger跟track之间的effect.如果单纯的响应式原理根本就用不上effect,那么effect到底是干什么的呢? 船到桥头自然直,柳岸花明又一村.苦心人天不负,偶然间我看到了effect测试代码用例! it('should observe basic properties', () => { let dummy const counter = rea

浅谈Vue3 Composition API如何替换Vue Mixins

想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性. 回顾Mixins功能 让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位. 通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性--诸如 data,m

浅谈Vue3.0新版API之composition-api入坑指南

关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composition-api解决了什么问题 语法糖介绍 vite的安装使用 vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程,按照步骤安装即可 composition-api解决了什么问题 使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高

浅谈Angular中ngModel的$render

在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

浅谈Java中Unicode的编码和实现

Unicode的编码和实现 大概来说,Unicode编码系统可分为编码方式和实现方式两个层次. 编码方式 字符是抽象的最小文本单位.它没有固定的形状(可能是一个字形),而且没有值."A"是一个字符,"€"也是一个字符.字符集是字符的集合.编码字符集是一个字符集,它为每一个字符分配一个唯一数字. Unicode 最初设计是作为一种固定宽度的 16 位字符编码.也就是每个字符占用2个字节.这样理论上一共最多可以表示216(即65536)个字符.上述16位统一码字符构成基

浅谈python中copy和deepcopy中的区别

在下是个编程爱好者,最近将魔爪伸向了Python编程.....遇到copy和deepcopy感到很困惑,现在针对这两个方法进行区分,一种是浅复制(copy),一种是深度复制(deepcopy). 首先说一下deepcopy,所谓的深度复制,在这里我理解的是完全复制然后变成一个新的对象,复制的对象和被复制的对象没有任何关系,彼此之间无论怎么改变都相互不影响. 然后说一下copy,在这里我分为两类来说,一种是字典数据类型的copy函数,一种是copy包的copy函数. 一.字典数据类型的copy函数

浅谈python中列表、字符串、字典的常用操作

列表操作如此下: a = ["haha","xixi","baba"] 增:a.append[gg] a.insert[1,gg] 在下标为1的地方,新增 gg 删:a.remove(haha) 删除列表中从左往右,第一个匹配到的 haha del a.[0] 删除下标为0 对应的值 a.pop(0) 括号里不写内容,默认删除最后一个,写了,就删除对应下标的内容 改:a.[0] = "gg" 查:a[0] a.index(&q

浅谈PHP中的数据传输CURL

确认是否安装了CURL扩展 Linux下命令: [root@fengniu020 ~]# php -i | grep -i curl Additional .ini files parsed => /etc/php.d/curl.ini, curl cURL support => enabled cURL Information => 7.19.7 curl操作步骤解析: CURL实例 1.一个简单的curl,抓取百度首页 2.下载一个网页并把内容中的"百度"替换为&

浅谈django中的认证与登录

认证登录 django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1  authenticate(**credentials)    提供了用户认证,即验证用户名以及密码是否正确 一般需要username  password两个关键字参数 如果认证信息有效,会返回一个  User  对象.authenticate()会在User 对象上设置一个属性标识那种认证后端认证了该用户,且该信息在后面的登录过程中是需要的.当我们试图登陆一个从数据库中直接取出来不经过authent

浅谈Vim中的Tab与空格缩进

vim缩进参数解析 缩进用 tab 制表符还是空格,个人爱好问题.但是在大多项目中,习惯使用空格.关于缩进,vim中可以通过如下四个参数进行配置 set tabstop=4 set softtabstop=4 set shiftwidth=4 set noexpandtab / expandtab1 解析: tabstop 表示按一个tab之后,显示出来的相当于几个空格,默认的是8个. softtabstop 表示在编辑模式的时候按退格键的时候退回缩进的长度. shiftwidth 表示每一级缩