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);
- }
- })