組合 API（Composition API）

初始組合 API

傳統(tǒng) option 配置方法寫組件的時(shí)候，隨著業(yè)務(wù)復(fù)雜度越來越高，代碼量會(huì)越來越大，由于相關(guān)業(yè)務(wù)的代碼需要組訓(xùn) option 的配置，寫在 data、methods 等位置，后續(xù)維護(hù)復(fù)雜，代碼可復(fù)用性不高，使用組合 API 就能很好的規(guī)避這些問題，組合 API 的好處：代碼都在 setup()里面，更加靈活，不受條條框框約束，增加代碼可復(fù)用性

問題筆記

• setup()在創(chuàng)建組件之前就已經(jīng)調(diào)用，順序在 beforeCreate()前面，也就是說在 setup 里面沒有 this，setup 里沒有對象關(guān)系，不能使用 this
• import 必須包在 script 里面
• ref、reactive 都是方法，參數(shù)放到括號里，如：const data = reactive({ count:66})
• setup 里的方法里調(diào)用參數(shù)，不使用 this，直接調(diào)用即可
• 聲明的數(shù)據(jù)跟函數(shù)別忘了在 return 里面返回
• reactive 里面使用 computed，調(diào)用本 data 里的數(shù)據(jù)時(shí)，也需要寫成 data.count 的樣式
• computed 里面是一個(gè)匿名函數(shù)
• 導(dǎo)入子組件流程：
  1. import 引入子組件文件\
  2. 在父組件中 components 中聲明該子組件
  3. 在父組件標(biāo)簽中插入使用
• setup()參數(shù)
  1. 第一個(gè)參數(shù)：props，這個(gè)參數(shù)在 setup 里面是只讀的，如果轉(zhuǎn)成響應(yīng)式的可以百度一下，挺復(fù)雜麻煩的，而且基本也用不上
  2. 第二個(gè)參數(shù)：context，里面會(huì)存放沒有在 props 中聲明的其他傳過來的屬性，如：slots,parent,root,emit,refs 等
  3. context 也可以直接在形參處直接解構(gòu)賦值，把對應(yīng)的參數(shù)傳進(jìn)去
• setup()里面常規(guī)聲明的變量是一個(gè)原生變量，不是響應(yīng)式的，無法直接進(jìn)行操作

常用 API

使用 API 之前，一定要先將對應(yīng)的 API 引入

• ref
  1. 可以將單個(gè)變量變成響應(yīng)式let num = ref(6)
  2. 在方法中使用時(shí)，需要注意該變量在 return 后，在 div 中可以直接用{{num}}的形式使用，但是在 setup 中，如方法中使用時(shí)，它是一個(gè) RefImpl 對象的形式，其中值在 value 里面，因此方法中使用時(shí)，num.value才是其正確的值
• reactive、toRefs
  1. reactive 只能聲明一個(gè)對象，通常可以起名為 data（與 export default 中的 data 類似）
  2. reactive 里面值的使用方法就跟對象一樣
  3. 如果想在 div 中直接拿到對象里的所有值，可以將其在 return 的時(shí)候以展開方法的方式進(jìn)行展開，但是需要注意，如果直接展開，那數(shù)據(jù)就會(huì)失去響應(yīng)式
  4. 如果想展開的數(shù)據(jù)也是響應(yīng)式，可以配合 toRefs 使用，toRefs 可以將 return 展開的數(shù)組恢復(fù)成響應(yīng)式，如...toRefs(data)
• ref 中的數(shù)據(jù)也可以掛在到 reactive 中，但是一般沒啥用，可以直接使用 reactive
• readonly 將聲明一個(gè)變量將響應(yīng)式的變量轉(zhuǎn)為非響應(yīng)式，如下，num 是響應(yīng)式的變量，num2 就是非響應(yīng)式的，只有操作 num 的時(shí)候值才會(huì)變化且 num2 的值會(huì)跟著一起變化，操作 num2 的時(shí)候，值是不會(huì)變化的

let num = ref(66);
let num2 = readonly(num);

• isRef 結(jié)合三元運(yùn)算符使用，用作判斷一個(gè)變量是否是響應(yīng)式，如果是則給出一個(gè)輸出，如果不是則給出另一個(gè)輸出，類似的還有 isReadonly,isProxy 等等

計(jì)算屬性 API computed

• computed()用來創(chuàng)建計(jì)算屬性，返回值是一個(gè) ref 的實(shí)例
• computed()里如果只有一個(gè)匿名函數(shù)，默認(rèn)是 get 方法，如果需要添加 set 方法，則里面是一個(gè)對象

監(jiān)聽器 watch() watchEffect()

• watchEffect 是默認(rèn)在組件加載的時(shí)候就會(huì)調(diào)用一次（可以通過配置更改執(zhí)行時(shí)機(jī)），后面依賴屬性發(fā)生了變更會(huì)繼續(xù)執(zhí)行
• watch 可以在使用時(shí)明確指定需要監(jiān)聽的屬性，watchEffect 則是依賴回調(diào)函數(shù)中使用到的屬性
• watch 指定監(jiān)聽的屬性時(shí)，需要往 watch 里面?zhèn)鲄?，而不是傳到?nèi)部的匿名函數(shù)中
• watch 內(nèi)部的匿名函數(shù)可以接收兩個(gè)參數(shù)，第一個(gè)是監(jiān)聽值的新值，第二個(gè)是監(jiān)聽值的舊值
• watch 監(jiān)聽的屬性如果有多個(gè)，可以以數(shù)組的形式批量傳入（匿名函數(shù)中新舊值也是一樣）
• watch 默認(rèn)需要監(jiān)聽的屬性發(fā)生變更了才會(huì)執(zhí)行，也就是如果監(jiān)聽的屬性沒有發(fā)生變更，默認(rèn)不會(huì)執(zhí)行，如果想讓其在加載的時(shí)候先執(zhí)行一次可以在 watch 的參數(shù)最后面加上一個(gè){immediate.true}
• watch 指定監(jiān)聽的屬性傳參時(shí),可以傳入 ref、reactive 類型監(jiān)聽整個(gè)對象，如果要監(jiān)聽對象里的某個(gè)值需要用一個(gè)匿名函數(shù)把對象里需要監(jiān)聽的值返回出來使用，監(jiān)聽里面多個(gè)值的時(shí)候就是一個(gè)匿名函數(shù)的數(shù)組

生命周期

• 聲明周期引入的時(shí)候前面都會(huì)帶一個(gè) on
• 由于在 beforeCreate 跟 created 之前 setup 就已經(jīng)創(chuàng)建了，因此 setup 里面沒有這兩個(gè)聲明周期，setup 可以直接替代這兩個(gè)聲明周期

provide 與 inject

• provide 與 inject 在單獨(dú)使用的時(shí)候，需要爺組件在 data 里也聲明一個(gè)變量，然后把變量放到 provide 里面?zhèn)鹘o孫組件，不然只用 provide 傳給孫組件，爺組件是不能用這個(gè)變量的，爺組件的數(shù)據(jù)跟孫組件的數(shù)據(jù)不是響應(yīng)式的
• 在 setup 里面 provide 與 inject 是響應(yīng)式的

router 與 vuex

• route 跟 router 是從 vue-router 里面引入的
• 引入的兩個(gè)分別是 useRoute 和 useRouter 兩個(gè)方法
• vuex 是從 vuex 里引入的，但是引入的是 useStore 狀態(tài)管理對象的方法
• 引入以后賦值給一個(gè)變量，就可以正常的把變量當(dāng)做 route、 router、store 使用了
• 使用狀態(tài)管理里面的數(shù)據(jù)的時(shí)候，可以把 store 返回，也可以用$store 直接使用

批改老師：PHPz

批改狀態(tài)：合格

老師批語：