vue3.0 computed

<template>
  <div class="home">{
     {
      plusOne }}</div>
  <div class="home">{
     {
      plusTwo }}</div>
</template>

<script lang="ts">
import {
      ref, computed } from 'vue'
export default {
     
  setup() {
     
    const count = ref(0)
    const countTwo = ref(0)
    const plusOne = computed(() => count.value + 1)

    console.log(plusOne.value) // 1

    const plusTwo = computed({
     
      /** 设置plusTwo.value的值,这里每一次countTwo.value的变化，都会引起get的执行，并给plusTwo.value重新赋值 */
      get: () => countTwo.value + 1,
      set: (val) => {
     
        // val 就是plusTwo.value的最新值,每一次plusTwo变化,就会重新执行set
        console.log(val)
        countTwo.value = val - 1
      }
    })

    plusTwo.value = 4
    console.log(plusTwo.value) // 4
    console.log(countTwo.value) // 3

    countTwo.value = 10
    console.log(plusTwo.value) // 11
    console.log(countTwo.value) // 10
    return {
      plusOne, plusTwo }
  }
}
</script>

computed的类型声明

// 只读的
function computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>

// 可写的
function computed<T>(options: {
      get: () => T; set: (value: T) => void }): Ref<T>

与vue2.0的computed的功能基本一致，用法有所不同。