computed计算属性
计算属性就是当依赖的属性的值发生变化的时候,才会触发他的更改,如果依赖的值,不发生变化的时候,使用的是缓存中的属性值
- 创建一个只读的计算属性 ref:
<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
let state = ref(0)
let num = computed<number>(() => state.value)
num.value++ // 错误
console.log(num.value) // 0
</script>
- 创建一个可写的计算属性 ref:
<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
let state = ref(0)
let num = computed({
get: () => state.value + 1,
set: (val) => {
state.value = val - 1
}
})
console.log(num.value) // 1
console.log(state.value) // 0
</script>