【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>