vue3.0提前了解系列一 ref和reactive

注：經熱心群友提醒，本文內容可能存在部分理解問題，還未來得及做驗證，會盡快驗證並修復

非常抱歉，昨天電腦玩廢了，跑了大半個北京都沒招，最終直接重裝系統了。所以沒來得及更新，抱歉。

話不多說進入今天的主題，搭建好項目后，我們來嘗試composition語法，本來想講一節大的語法，但是發現ref和reactive這個東西還挺多的，所以將就這兩個API進行一波分享

老規矩先上完整代碼片段

<template>
  <div class="test">
    <h1>ref && reactive</h1>
    <h2>
      ref:{{ count }}
    </h2>
    <h2>
      reactive:{{ reactiveField }}
    </h2>
    <h2>
      reactive:{{ a[0].a }}
    </h2>
    <button @click="addRef">
      addRef
    </button>
    <button @click="addReactive">
      addReactive
    </button>
    <button @click="addA">
      addA
    </button>
  </div>
</template>

<script>
  import { ref, reactive, toRefs} from 'vue'
  export default {
    setup () {
      const count = ref(0)
      const state = reactive({
        reactiveField: 0,
        a: [
          {
            a:1
          }
        ]
      })
      const addRef = () => {
        count.value++
      }
      const addReactive = () =>{
        state.reactiveField++
      }
      const addA = () => {
        state.a[0].a++
      }
      return {
        count,
        ...toRefs(state),
        addA,
        addRef,
        addReactive
      }
    }
  }
</script>

<style lang="scss" scoped>
.test {
  color: red;
}
</style>

上面這么多，我只是在做同一件事情，雙向數據綁定。vue一共提供了兩種數據響應式監聽，有點React Hooks的味道了。ref 函數傳入一個值作為參數，返回一個基於該值的響應式Ref對象，該對象中的值一旦被改變和訪問，都會被跟蹤到，就像我們改寫后的示例代碼一樣，通過修改 count.value 的值，可以觸發模板的重新渲染，顯示最新的值。
其實，除了 ref 函數，Vue3.0中還提供了另外一個可以創建響應式對象的函數，那就是 reactive 函數。下面就來說說為什么要提供兩種API

1、是為了適應不同的寫法的人群

有的人可能喜歡這種寫法

const a = 1
const b = 2

也有的人可能喜歡這種寫法

const field = {
  a : 1,
  b : 1    
}

在這里不評價哪種合適，也沒有什么准確的答案，兩者的主要區別在於：一，我們使用了2個變量來存儲值；而風格二則當作對象的屬性存儲。這兩種風格的代碼工作的都沒問題，關鍵在於個人或團隊的偏好：使用單獨的變量還是使用對象封裝，我覺得ref更偏向於第一類人，而reactive更偏向於第二類吧

2、ref只可以監聽簡單數據，reactive可以監聽所有數據

ref這種寫法簡單，但也有弊端，經過嘗試，我發現他只能監聽一些如數字、字符串、布爾之類的簡單數據而如果需要監聽如上面代碼一樣的jsonArray我們在vue2種都會使用$set來進行變更，到了vue3我們終於可以愉快的使用reactive來實現了。

3、使用方式不一樣

1、ref修改數據需要使用這樣count.value=xxx的形式，而reactive只需要state.reactiveField=值這樣來使用

2、第二點體現在template中引用時候為reactiveField，不需要state，也就是說我reactive對象里面字段是應該直接使用的

3、體現在reactive在return時候需要toRefs來轉換成響應式對象

目前剛剛接觸，我總結出的不同大概就這么些吧，我上面也提到了使用reactive需要用toRefs來包裹，那這個函數干嘛用的呢？

toRefs函數我是這么理解的 他能將reactive創建的響應式對象，轉化成為普通的對象，並且這個對象上的每個節點，都是ref()類型的響應式數據。

今天分享大概就這么多吧，我還要去吧軟件都安裝回來，，，，下一次分享內容：composition生命周期、計算屬性、watch屬性的使用