vue3学习（三）--- 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
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

对象形式

import { computed } from "vue"
let plus = computed({
  get() {
    return num
  },
  set(val) {
   num.value = 'set' + val
  },
})
1
2
3
4
5
6
7
8
9

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21