我們知道在 Vue3 中有兩個非常常用的響應式 API：reactive 和 ref。這樣就可以變成我們想要追蹤的數據變成響應式。

　　知道嗎？在使用時一直被告知 ref 用于創建基礎類型的響應式，也可以創建引用類型的響應式。而對于引用類型，底層也是轉換為 reactive 來進行響應式處理。那既然這樣為撒還需要 reactive ，全部使用 ref 不就行了嗎？

　　雖然 ref 創建的響應式數據在腳本中需要通過 .value 才能訪問到呀！但是這里肯定影響不大。并且在模板中會自動添加上 .value，所以模板中不需要通過 .value 訪問。

　　既然這二者基本沒撒差別，但是還是暴露了 reactive 這個 API，難道有什么場景是 reactive 能做而 ref 做不了的？

　　簡單了解 ref & reactive

　　現在我們簡單簡述下 API。

　　reactive

　　返回對象的響應式副本，響應式轉換是“深層”的——它影響所有嵌套 property。這是常規寫法。

　　const obj = reactive({ count: 0 })

　　并且可以直接使用。

　　const count = obj.count

　　ref

　　接受一個內部值并返回一個響應式且可變的 ref 對象。ref 對象僅有一個.valueproperty，指向該內部值。 這是常規寫法。

　　const data = ref(xxx)

　　引用的時候，一般會通過data.value的方式引用。

　　const dataValue = data.value

　　上述代碼中跟蹤 Vue3 的源代碼表明，在調用 ref 方法來定義響應式數據時，當參數為對象類型時，只是用到 reactive 方法。也就是說上面的 data.value ，事實上是 reactive 方法創造出來的。

　　reactive 能做的 ref 也能做，并且還是用 reactive 做的

　　我們通過源碼來看看 ref 的源碼實現。

　　源碼分析版本：3.2.36

　　function ref(value) {
　　return createRef(value, false);
　　}

　　ref 函數跳轉到 createRef 函數。

　　function createRef(rawValue, shallow) {
　　...
　　return new RefImpl(rawValue, shallow);
　　}

　　createRef 函數返回的是 RefImpl 類的實例，換句話說，ref 創建出來的響應式就是 RefImpl 實例對象。

　　const count = ref(1);
　　console.log(count);

　　重點講解 RefImpl 類。

　　class RefImpl {
　　constructor(value, __v_isShallow) {
　　...
　　this._value = __v_isShallow ? value : toReactive(value);
　　}
　　get value() {
　　trackRefValue(this);
　　return this._value;
　　}
　　set value(newVal) {
　　newVal = this.__v_isShallow ? newVal : toRaw(newVal);
　　if (hasChanged(newVal, this._rawValue)) {
　　this._rawValue = newVal;
　　this._value = this.__v_isShallow ? newVal : toReactive(newVal);
　　triggerRefValue(this, newVal);
　　}
　　}
　　}

　　__v_isShallow參數在這里默認是 false，記住在使用shallowRef時，返回參數為 true。

　　function shallowRef(value) {
　　return createRef(value, true);
　　}

　　Ref 與 Reactive 創建的都是遞歸響應的，將每一層的 json 數據解析成一個 proxy 對象，shallowRef 與 shallowReactive 創建的是非遞歸的響應對象，shallowReactive 創建的數據第一層數據改變會重新渲染 dom。

　　var state = shallowReactive({
　　a:'a',
　　gf:{
　　b:'b',
　　f:{
　　c:'c',
　　s:{d:'d'}
　　}
　　}
　　});
　　// 改變第一層的數據會導致頁面重新渲染
　　state.a = '1'
　　// 如果不改變第一層，只改變其他的數據頁面不會重新渲染
　　state.gf.b = 2
　　

　　　　通過 shallowRef 創建的響應式對象，需要修改整個 value 才能重新渲染 dom。

　　var state = shallowRef({
　　a:'a',
　　gf:{
　　b:'b',
　　f:{
　　c:'c',
　　s:{d:'d'}
　　}
　　}
　　});
　　// 不會重新渲染
　　state.value.a = 1
　　// 要修改整個 value 才能重新渲染
　　state.value = {
　　a:'1',
　　gf:{
　　b:'2',
　　f:{
　　c:'3',
　　s:{d:'d'}
　　}
　　}
　　}

　　如果想更新 shallowRef 的某一層數據，并且想觸發渲染，可以使用 triggerRef。

　　var state = shallowRef({
　　a:'a',
　　gf:{
　　b:'b',
　　f:{
　　c:'c',
　　s:{d:'d'}
　　}
　　}
　　})
　　state.value.gf.f.s.d = 4
　　triggerRef(state)

　　現在到了toReactive(value)函數。

　　const isObject = (val) => val !== null && typeof val === 'object';
　　const toReactive = (value) => isObject(value) ? reactive(value) : value;

　　假如傳入的參數是一個對象的話，返回值將會繼續調用 reactive 方法來進行包裹，reactive 最終會通過 Proxy 來進行實現響應攔截，返回的也是一個 Proxy 對象，但在這里不重要，我們只需要知道當 ref 的參數為對象時，用的就是 reactive 方法。

　　const data = reactive({
　　count: 1,
　　});
　　console.log(data);
　　const data_ref = ref({
　　count: 1,
　　});
　　console.log(data_ref);

　　上圖顯而易見，讓對 ref 傳入對象作為參數時和傳入基本類型作為參數返回反饋結果不一樣。

　　基本類型返回值value就是具體的值，對象類型返回值value是 reactive 方法創建的 proxy 對象。

　　通過源碼來看，其實也證明了，在 Vue3 中，如果是把對象類型的數據弄成響應式，reactive 和 ref 都可以，且ref 內部是通過r eactive 來支持的。

　　也就是說，你 reactive 能做的，我 ref 也能做。

　　ref 能做，但是 reactive 不能做

　　其實通過上面的例子就能知道有什么是 reactive 不能做的呢？很明顯，reactive 不支持對基本類型數據響應式，也就是說基本類型數據不能直接作為 reactive 的參數來使用。

　　簡單看看源碼。

　　function reactive(target) {
　　...
　　return createReactiveObject(...);
　　}

　　reactive 函數跳轉到 createReactiveObject 函數。

　　const isObject = (val) => val !== null && typeof val === 'object';
　　function createReactiveObject(...) {
　　if (!isObject(target)) {
　　{
　　console.warn(`value cannot be made reactive: ${String(target)}`);
　　}
　　return target;
　　}
　　...
　　const proxy = new Proxy(...);
　　proxyMap.set(target, proxy);
　　return proxy;
　　}

　　createReactiveObject 一開始就會判斷target是否是對象，如果不是對象就會直接??提示返回。如果是對象就會把 target 用 Proxy 變成響應式對象。

　　const data = reactive(10);

　　通過源碼來分析了兩個響應式 API，發現 Vue3 中有沒有 reactive 能做而 ref 做不了的場景？

　　結論是：沒有

　　總結來說就是ref 在 reactive 上在進行了封裝進行了增強，因此在 Vue3 中 reactive 能做的，ref 也能做，reactive 不能做的，ref 也能做。希望大家以后多多交流，學習到更多。