ref 函數(shù)

<template>
  <h1>{{count}}</h1>
  <h1>{{double}}</h1>
  <button @click="increase">+1</button>
</template>

import { ref } from "vue"

setup() {
  // ref 是一個函數(shù)，它接受一個參數(shù)，返回的就是一個神奇的 響應(yīng)式對象 。我們初始化的這個 0 作為參數(shù)包裹到這個對象中去，在未來可以檢測到改變并作出對應(yīng)的相應(yīng)。
  const count = ref(0)
  const double = computed(() => {
    return count.value * 2
  })
  const increase = () => {
    count.value++
  }
  return {
    count,
    increase,
    double
  }
}

Reactive 函數(shù)

import { ref, computed, reactive, toRefs } from 'vue'

interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}

setup() {
  const data: DataProps  = reactive({
    count: 0,
    increase: () => { data.count++},
    double: computed(() => data.count * 2)
  })
  const refData = toRefs(data)
  return {
    ...refData
  }
}

使用 ref 還是 reactive 可以選擇這樣的準(zhǔn)則

第一，就像剛才的原生 javascript 的代碼一樣，像你平常寫普通的 js 代碼選擇原始類型和對象類型一樣來選擇是使用 ref 還是 reactive。
第二，所有場景都使用 reactive，但是要記得使用 toRefs 保證 reactive 對象屬性保持響應(yīng)性。