Vue3.0 中 ref、reactive、toRef、toRefs、customRef的區別

1、ref（），reactive（） //定義vue2.0中data和method方法
2、setup（） //代替data和method返回數據和方法，在beforeCreate、created之前執行
3、toRefs（） //使用拓展用算符...的方法返回數據data

一、reactive

reactive 用於為對象添加響應式狀態。接收一個js對象作為參數，返回一個具有響應式狀態的副本。

獲取數據值的時候直接獲取，不需要加.value
參數只能傳入對象類型

等價於Vue2中的Vue.observable() ，來賦予對象(Object) 響應式的特性

import { reactive } from 'vue'

// 響應式狀態
const state = reactive({
  count: 0
})

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

e.g2

reactive（）函數接收一個普通對象，返回一個響應式的數據對象。

基本語法

import {reactive}from "@vue/composition-api"  //按需導入函數

const state=reactive({count:0}) //得到的state類似於vue2.x中date返回的響應式數據對象

 

在setup()函數中調用reactive（）函數創建響應式數據對象

setup{

const state=reactive({count:0})

return state  //將響應式數據對象return出去供template使用

}

在template中訪問

<P>當前count的值為{{count}}<P/>

 

二、ref

ref 用於為數據（基本的、復雜的都🉑️）添加響應式狀態。由於reactive只能傳入對象類型的參數，而對於基本數據類型要添加響應式狀態就只能用ref了，同樣返回一個具有響應式狀態的副本。

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

相比於Vue2，用ref的好處就是傳值時可以不用再寫this。

import { ref } from 'vue'

// 為基本數據類型添加響應式狀態
const name = ref('我是新變量')

// 為復雜數據類型添加響應式狀態
const state = ref({
  count: 0
})

// 打印name的值
console.log(name.value) // 我是新變量
// 打印count的值
console.log(state.value.count)

三、toRef

toRef 用於為源響應式對象上的屬性新建一個ref，從而保持對其源對象屬性的響應式連接。接收兩個參數：源響應式對象 和 屬性名，返回一個ref數據。例如使用父組件傳遞的props數據時，要引用props的某個屬性且要保持響應式連接時就很有用。

獲取數據值的時候需要加.value
toRef后的ref數據不是原始數據的拷貝，而是引用，改變結果數據的值也會同時改變原始數據

import { defineComponent, toRef } from 'vue'

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

    console.log(myTitle.value)
  }
})

四、toRefs

toRefs 用於將響應式對象轉換為結果對象，其中結果對象的每個屬性都是指向原始對象相應屬性的ref。常用於es6的解構賦值操作，因為在對一個響應式對象直接解構時  解構后的數據將不再有響應式，而使用toRefs可以方便解決這一問題。

獲取數據值的時候需要加.value
toRefs后的ref數據不是原始數據的拷貝，而是引用，改變結果數據的值也會同時改變原始數據
作用其實和 toRef 類似，只不過 toRef 是一個個手動賦值，而 toRefs 是自動賦值。

import { defineComponent, toRefs } from 'vue'

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

    console.log(myTitle.value)
  }
})

五、customRef

(1) customRef 用於自定義返回一個ref對象,可以顯式地 控制依賴追蹤和觸發響應, 接受工廠函數

(2) 兩個參數分別是用於追蹤的 track 與用於觸發響應的 trigger，並返回一個一個帶有 get 和 set 屬性的對象

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