【Vue3】computed计算属性

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>