一、reactive

reactive 用于為對(duì)象添加響應(yīng)式狀態(tài)。接收一個(gè)js對(duì)象作為參數(shù)，返回一個(gè)具有響應(yīng)式狀態(tài)的副本。

獲取數(shù)據(jù)值的時(shí)候直接獲取，不需要加.value
參數(shù)只能傳入對(duì)象類型

import { reactive } from 'vue'

// 響應(yīng)式狀態(tài)
const state = reactive({
  count: 0
})

// 打印count的值
console.log(state.count)

二、ref

ref 用于為數(shù)據(jù)添加響應(yīng)式狀態(tài)。由于reactive只能傳入對(duì)象類型的參數(shù)，而對(duì)于基本數(shù)據(jù)類型要添加響應(yīng)式狀態(tài)就只能用ref了，同樣返回一個(gè)具有響應(yīng)式狀態(tài)的副本。

獲取數(shù)據(jù)值的時(shí)候需要加.value。可以理解為ref是通過reactive包裝了一層具有value屬性的對(duì)象實(shí)現(xiàn)的
參數(shù)可以傳遞任意數(shù)據(jù)類型，傳遞對(duì)象類型時(shí)也能保持深度響應(yīng)式，所以適用性更廣。
vue 3.0 setup里定義數(shù)據(jù)時(shí)推薦優(yōu)先使用ref，方便邏輯拆分和業(yè)務(wù)解耦。

import { ref } from 'vue'

// 為基本數(shù)據(jù)類型添加響應(yīng)式狀態(tài)
const name = ref('Neo')

// 為復(fù)雜數(shù)據(jù)類型添加響應(yīng)式狀態(tài)
const state = ref({
  count: 0
})

// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)

三、toRef

toRef 用于為源響應(yīng)式對(duì)象上的屬性新建一個(gè)ref，從而保持對(duì)其源對(duì)象屬性的響應(yīng)式連接。接收兩個(gè)參數(shù)：源響應(yīng)式對(duì)象和屬性名，返回一個(gè)ref數(shù)據(jù)。例如使用父組件傳遞的props數(shù)據(jù)時(shí)，要引用props的某個(gè)屬性且要保持響應(yīng)式連接時(shí)就很有用。

獲取數(shù)據(jù)值的時(shí)候需要加.value
toRef后的ref數(shù)據(jù)不是原始數(shù)據(jù)的拷貝，而是引用，改變結(jié)果數(shù)據(jù)的值也會(huì)同時(shí)改變?cè)紨?shù)據(jù)

import { defineComponent, toRef } from 'vue'

export default defineComponent({
  props: [title],
  
  setup (props) {
    // 創(chuàng)建變量myTitle
    const myTitle = toRef(props, 'title')

    console.log(myTitle.value)
  }
})

四、toRefs

toRefs 用于將響應(yīng)式對(duì)象轉(zhuǎn)換為結(jié)果對(duì)象，其中結(jié)果對(duì)象的每個(gè)屬性都是指向原始對(duì)象相應(yīng)屬性的ref。常用于es6的解構(gòu)賦值操作，因?yàn)樵趯?duì)一個(gè)響應(yīng)式對(duì)象直接解構(gòu)時(shí)解構(gòu)后的數(shù)據(jù)將不再有響應(yīng)式，而使用toRefs可以方便解決這一問題。

獲取數(shù)據(jù)值的時(shí)候需要加.value
toRefs后的ref數(shù)據(jù)不是原始數(shù)據(jù)的拷貝，而是引用，改變結(jié)果數(shù)據(jù)的值也會(huì)同時(shí)改變?cè)紨?shù)據(jù)
作用其實(shí)和 toRef 類似，只不過 toRef 是一個(gè)個(gè)手動(dòng)賦值，而 toRefs 是自動(dòng)賦值。

import { defineComponent, toRefs } from 'vue'

export default defineComponent({
  props: [title],
  
  setup (props) {
    // 使用了解構(gòu)賦值語法創(chuàng)建了變量myTitle
    const { myTitle } = toRefs(props)

    console.log(myTitle.value)
  }
})

五、customRef

(1)customRef 用于自定義返回一個(gè)ref對(duì)象,可以顯式地控制依賴追蹤和觸發(fā)響應(yīng),接受工廠函數(shù)

(2)兩個(gè)參數(shù)分別是用于追蹤的 track 與用于觸發(fā)響應(yīng)的 trigger，并返回一個(gè)一個(gè)帶有 get 和 set 屬性的對(duì)象

使用:

    import {customRef} from 'vue';
    
    
    function useDebouncedRef(value) {
          return customRef((track, trigger) => {
            return {
              get() {
                track()
                return value
              },
              set(newValue) {
                value2=newValue
                trigger()
              },
            }
          })
     }
    ```
    通過customRef返回的ref對(duì)象,和正常ref對(duì)象一樣,通過x.value修改或讀取值