vue3学习（三）--- computed计算属性

最新推荐文章于 2025-05-06 17:07:45 发布

邱先生~

最新推荐文章于 2025-05-06 17:07:45 发布

阅读量584

点赞数

分类专栏： vue3 文章标签：学习 vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_43932245/article/details/133741912

版权

vue3 专栏收录该内容

15 篇文章

订阅专栏

文章目录

函数形式
对象形式
computed传参

计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

函数形式

import { ref, reactive, computed } from 'vue'

// 基础数据类型
let num = ref(20)
let computedNum = computed(() => {
  return num.value * 2
})


// 引用类型
let reaNum = reactive({ num: 50 })
let computedReaNum = computed(() => {
  return reaNum.num * 2
})

对象形式

import { computed } from "vue"
let plus = computed({
  get() {
    return num
  },
  set(val) {
   num.value = 'set' + val
  },
})

函数形式是只读的，只能调用computed无法再次修改赋值
对象形式可以读取和修改（一般不常用）

computed传参

computed无法直接传参：computed 计算属性并没有给定返回值，我们调用的是一个函数，而 computed 内部返回的并不是一个函数，所以就会报错：xxx is not a function。

解决：
在computed内部返回一个新的函数来接收参数

<template>
 <div>{{sltEle(obj)}}</div>
</template>
<script>
import { ref, computed,reactive } from "vue"
export default{
 setup(){
  const obj= reactive({name:'123'})
  
  传参
  const sltEle = computed( ()=>{
  	return function(obj){
	 return '$'+obj
	}
  })
  return{
   obj,sltEle
  }
 }
}
</script>