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

一、reactive

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

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

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

import { reactive } from 'vue'

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

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

二、ref

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

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

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

 

import { ref } from 'vue'

// 為基本數據類型添加響應式狀態
const name = ref('Neo')

// 為復雜數據類型添加響應式狀態
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修改或讀取值

 

六、ComputedRef

 

待總結。。。

 

 

 

 

 

 

 

參考：

https://www.jianshu.com/p/7b41c826d1c2