ref

建立一個響應式資料，一般來說用於建立簡單型別的響應式物件，比如String、Number型別

const name = ref('tom')

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

正如上面所說，ref通常用於定義一個簡單型別，那麼是否可以定義一個物件或者陣列？

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

控制檯可以看到，對於複雜的物件，值是一個被proxy

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建立，否則返回原始值