Options API的特點： 對應的屬性中編寫對應的功能模塊（data定義數(shù)據(jù)，methods定義方法，computed定義計算屬性，watch中監(jiān)聽屬性改變，還有生命周期的鉤子）
一、Options API的弊端
1. 實現(xiàn)某個功能時，這個功能對應的代碼邏輯會被拆分到各個屬性中；
2. 組件變得更大更復雜時，邏輯關注點的列表就會增長，同一個功能的邏輯就會被查分的很分散；
3. 對于一開始沒有編寫這些組件的人來說，這個組件的代碼是難以閱讀和理解的。
二、setup函數(shù)
1、setup函數(shù)的參數(shù)
① 第一個參數(shù)：props
props 父組件傳遞過來的屬性會被放到props對象中，要在setup中使用，就可以直接通過props獲取
② 第二個參數(shù)：context（包含三個屬性）
· attrs：所有非prop的attribute
· slots：父組件傳遞過來的插槽
· emit：組件內部需要觸發(fā)事件時會用到
2、setup函數(shù)的返回值
· 可以在template中被使用（通過setup的返回值來替代data選項）
· 返回一個執(zhí)行函數(shù)來替代在methods中定義的方法
3、setup不可以使用this
· this并沒有指向當前實例
· 在setup被調用之前，data、computed、methods等都沒有被解析
三、Reactive API（為setup中的數(shù)據(jù)提供響應式的特性）
· 我們使用reactive函數(shù)處理我們的數(shù)據(jù)之后，數(shù)據(jù)再次被使用時就會進行依賴收集
· 當數(shù)據(jù)發(fā)生改變時，所有收集到的依賴都是進行對應的響應式操作（比如更新界面）
· 我們編寫的data選項，也是在內部交給了reactive函數(shù)將其編成響應式對象的
? ? ? ?import { reactive } from "vue"
? ? ? ?const state = reactive({
? ? ? ? ? ? counter: 10
? ? ? ? })
四、Ref API（為setup中的數(shù)據(jù)提供響應式的特性）
· ref 會返回一個可變的響應式對象，該對象作為一個響應式的引用維護著它內部的值，這就是ref名稱的來源
· 內部的值是在ref的value屬性中被維護的
? ? ? ? import { ref } from "vue"
? ? ? ? const counter = ref(10)
五、Readonly API（只讀）
· 會返回原生對象的只讀代理（也就是proxy，這是一個proxy的set方法被劫持，并且不能對齊進行修改）
? ? ?import { readonly } from "vue"
? ? ?const info = reactive({
? ? ? ? ? ? name: "coco"
? ? ? ? })
? ? ? ? const readonlyInfo = readonly(info)
? ? ? ? const updateState = () => {
? ? ? ? ? ? info.name = "jack" // 成功
? ? ? ? ? ? readonlyInfo.name = "kiki"? // 失敗且警告
? ? ? ? }
六、reactive 相關的API
1.? isProxy
· 檢查對象是否由 reactive 或 readonly 創(chuàng)建的 proxy
2.? isReactive
· 檢查對象是否由 reactive 創(chuàng)建的響應式代理
· 如果該代理是 readonly 創(chuàng)建的，但包裹了由 reactive 創(chuàng)建的另一個代理，它也會返回true
3.? isReadonly
· 檢查對象是否由 readonly 創(chuàng)建的只讀代理
4.? toRaw
· 返回由reactive 或 readonly代理的原始對象（不建議保留對原始對象的持久引用）
5.? shallowReactive
· 創(chuàng)建一個響應式代理，他跟蹤其自身 property 的響應式，但不執(zhí)行嵌套對象的深層響應式轉換（深層還是原生對象）
6.? shallowReadonly
· 創(chuàng)建一個 proxy，使其自身 property 為只讀，但不執(zhí)行嵌套對象的深度只讀轉換（深層還是可讀、可寫的）
七、toRefs
· 可以將 reactive 返回的對象中的屬性都轉成 ref
· 這種做法相當于在state.name 和 ref.value之間建立了鏈接，任何一個修改都會引起另一個的變化
八、toRef
· 將 reactive 中的某一個屬性都轉成 ref
九、ref 相關的API
1.? isRef
· 判斷是否是一個 ref 對象
2.? unref
· 如果參數(shù)是一個ref，則返回內部值，否則返回參數(shù)本身
· 這是 val = isRef(val) ? val.value : val 的語法糖函數(shù)
3.? shallowRef
· 創(chuàng)建一個漸層的 ref 對象
4.? triggerRef
· 手動觸發(fā)和 shallowRef 相關聯(lián)的副作用
4.? customRef
· 創(chuàng)建一個自定義ref，并對其依賴項跟蹤和更新觸發(fā)進行顯示控制
· 它需要一個工廠函數(shù)，該函數(shù)接受track和trigger函數(shù)座位參數(shù)
· 返回一個帶有get和set的對象
