vue3中ref與reactive的區別

ref

創建一個響應式數據，一般來說用於創建簡單類型的響應式對象，比如String、Number類型

const name = ref('tom')

可以看到，ref方法將這個字符串進行了一層包裹，返回的是一個RefImpl類型的對象，譯爲引用的實現(reference implement),在該對象上設置了一個不可枚舉的屬性value，所以使用name.value來讀取值。

正如上面所說，ref通常用於定義一個簡單類型，那麼是否可以定義一個對象或者數組？

const obj = ref({
  age: 12,
  sex: 'man',
})

控制檯可以看到，對於複雜的對象，值是一個被proxy攔截處理過的對象，但是裏面的屬性age和sex不是RefImpl類型的對象，proxy代理的對象同樣被掛載到value上，所以可以通過obj.value.age來讀取屬性，這些屬性同樣也是響應式的，更改時可以觸發視圖的更新

reactive

通過上面ref的使用案例，起始不管是複雜引用類型，如array，object等，亦或者是簡單的值類型string,number都可以使用ref來進行定義，但是，定義對象的話，通常還是用reactive來實現

const person = reactive({
  height: 180,
})

可以看到返回的person是一個proxy代理的對象，使用時person.height即可

那麼能否使用reactive來定義普通類型？

const id = reactive('id是1')

可以看到reactive只能被用來定義對象

ref與reactive的區別與聯繫

一般來說，ref被用來定義簡單的字符串或者數值，而reactive被用來定義對象數組等

ref定義對象時，value返回的是proxy，reactive定義對象時返回的也是proxy，而這確實存在一些聯繫

ref來定義數據時，會對裏面的數據類型進行一層判斷，當遇到複雜的引用類型時,還是會使用reactive來進行處理

class RefImpl {
    constructor(value, _shallow) {
        this._shallow = _shallow;
        this.dep = undefined;
        this.__v_isRef = true;
        this._rawValue = _shallow ? value : toRaw(value);
        this._value = _shallow ? value : toReactive(value);
    }
    ////......
}

const toReactive = (value) => isObject(value) ? reactive(value) : value;// 判斷參數是否爲對象，是對象調用reactive創建，否則返回原始值