課堂day44 position apin目前我們使用組件化方式在開發(fā)整個Vue應(yīng)用程序但是和

n目前我們是使用組件化的方式在開發(fā)整個Vue的應(yīng)用程序，但是組件和組件之間有時候會存在相同的代碼邏輯，我n在Vue2和Vue3中都支持 式就是使用Mixin來完成pMixin提供了一種非常靈活的方式，來分發(fā)Vue組件中的可復(fù)用功能p一個Mixin對象可以包含任何組件選項p當(dāng)組件使用Mixin對象時，所有Mixin對象的選項將被混合進(jìn)入該組件本身的選項

n如果Mixin對象中的選項和組件對象中的選項發(fā)生 ，那么Vue會如何操作呢p這里分成不同的情況n情況一：如果是datap返回值對象默認(rèn)情況下會進(jìn)行合并p如果data返回值對象的屬性發(fā)生 ，那么會保留組件自身的數(shù)據(jù)np生命周期的鉤子函數(shù)會被合并到數(shù)組n情況三：值為對象的選項，例 ponents和directives，將被合并為同一個對象p比如都有methods選項，并且都定義了方法，那么它們都會生效p但是如果對象的key相同，那么會取組件對象的鍵值對

n如果組件中的某些選項，是所有的組件都需要擁有的，那么這個時候我們可以使用全局的p全局的Mixin可以使用應(yīng)用app的方法mixin來完 p一 ，那么全局混入的選項將會影響每一個組件

n另外一個類似于Mixin的方式是通過extends屬性p允 擴(kuò)展另外一個組件，類似于n在開發(fā)中extends用的非常少，在Vue2中比較推薦大家使用Mixin，而 中推薦使 positionAPI

OptionsAPIn在Vue2中，我們編寫組件的方式是OptionspOptionsAPI的一大特點(diǎn)就是在對應(yīng)的屬性中編寫對應(yīng)的功能模塊p比如 np當(dāng)我們實(shí)現(xiàn)某一個功能時，這個功能對應(yīng)的代碼邏輯會被拆分到各個屬性p當(dāng)我們組件變得更大、更復(fù)雜時，邏輯關(guān)注點(diǎn)的列表就會增長，那么同一個功能的邏輯就會被拆分的很分散p尤其對于那些一開始沒有編寫這些組件的人來說，這個組件的代碼是難以閱讀和理解的（閱讀組件的其他人np這種碎片化的代碼使用理解 這個復(fù)雜的組件變得異 ，并且隱藏了潛在的邏輯問題p并且當(dāng)我們處理單個邏輯關(guān)注點(diǎn)時，需要不斷的跳到相應(yīng)的代碼

n如果我們能將同一個邏輯關(guān)注n這就是CompositionAPI想n也有人把VueComposition

認(rèn)識Compositionn那么既然知道CompositionAPI想要幫助我們做什么事情，接下來看一下到底是怎么做呢？p為了開始使用CompositionAPI，我們需要有一個可以實(shí)際使用它（編寫代碼）的地方；p在Vue組件中，這個位置就是setup函數(shù)；nsetupp只不過這個選項強(qiáng)大到我們可以用它來替代之前所編寫的大部分其他選項p比 、puted、watch、data、生命周期等等npp

n我們先來研究一個setup函數(shù)的參數(shù)，它主要有兩個參數(shù)ppnprops非常好理解，它其實(shí)就是父組件傳遞過來的屬性會被放到props對象中，我們在setup中如果需要使用，那么就可p對于定義props的類型，我們還是和之前的規(guī)則是一樣的，在props選項中定義p并且在 te中依然是可以正常去使用props中的屬性，比如p如果我們在setup函數(shù)中想要使用props，那么不可以通過this去獲?。ê竺嫖視v到為什么p因為props有直接作為參數(shù)傳遞到setup函數(shù)中，所以我們可以直接通過參數(shù)n另外一個參數(shù)是context，我們也稱之為是一個SetupContext，它里面包含三個屬性pattrs：所有的非prop的pslots：父組件傳遞過來的插槽（這個在以渲染函數(shù)返回時會有作用，后面會講到pemit：當(dāng)我們組件內(nèi)部需要發(fā) 時會用到emit（因為我們不 this，所以不可以通過this.$emit發(fā)

nsetup既然是一個函數(shù)，那么它也可以有返回值，psetup的返回值可以在模板 te中被使用p也就是說我們可以通過setup的返回值來替代data選項n甚至是我們可以返回一個執(zhí)行函數(shù)來代替在methods中定義的方法n但是，如 counter在increment或者decrement進(jìn)行操作時，是否可以實(shí)現(xiàn)界面的響應(yīng)式呢p答案是不可以p這是因為對于一個定義的變量來說，默認(rèn)情況下，Vue并不 它的變化，來引起界面的響應(yīng)式操作

關(guān)于this有這樣一段描述（這段描述是我 提交了PR之后的一段描述p表達(dá)的含義是this并沒有指向當(dāng)前組件實(shí)例p并且在setup被調(diào)用之前 puted、methods等都沒有被解析p所以無法在setup中獲取n其實(shí)在之前的這段描述是和源碼有出入的（我 提交了PR，做出了描述的修改p之前的描述大概含義是不可以使用this是因為組件實(shí)例還沒有被創(chuàng)建出來p后來我的PR也有被合并 文檔中

np調(diào)用 ponentInstance創(chuàng)建組件實(shí)p調(diào)用 ponent初始化component內(nèi)p調(diào)用 ponent初始化有狀態(tài)p在 ponent取出了setup函p通過callWithErrorHandling的函數(shù)執(zhí)行n從上面的代碼我們可以看出，組件的instance肯定是在執(zhí)行setup函數(shù)之前就創(chuàng)建出來的。

Reactiven如果想為在setup中定義的數(shù)據(jù)提供響應(yīng)式的特性，那么我們可以使用reactive的函數(shù)np這是因為當(dāng)我們使用reactive函數(shù)處理我們的數(shù)據(jù)之后，數(shù)據(jù)再次被使用時就會進(jìn)行依賴收集p當(dāng)數(shù)據(jù)發(fā)生改變時，所有收集到的依賴都是進(jìn)行對應(yīng)的響應(yīng)式操作（比如更新界面p事實(shí)上，我們編寫的data選項，也是在內(nèi)部交給了reactive函數(shù)

RefnreactiveAPI對傳入的類型是有限制的，它要 須傳入的是一個對象或者數(shù)組類型p如果我們傳入一個基本數(shù)據(jù)類型（String、Number、Boolean）會報一個警告n這個時候Vue3給我們提供了另外一個API：refpref會返回一個可變的響應(yīng)式對象，該對象作為一個響應(yīng)式 著它內(nèi)部的值，這就是ref名稱的來源p它內(nèi)部的值是在ref的value屬性中 的np在模板中引入ref的值時，Vue會自動幫助我們進(jìn)行解包操作，所以我們并不需要在模板中通過ref.value的方式p但是在setup函數(shù)內(nèi)部，它依然是一個 ，所以對其進(jìn)行操作時，我們依然需要使用ref.value的方式

n模板中的解包是淺層的解包n如 ref放到一個reactive的屬性當(dāng)中，那么在模板中使用時，它會自動解包

n我們通過reactive或者ref可以獲取到一個響應(yīng)式的對象，但是某些情況下，我們傳入給其他地方（組件）的這個pVue3為我們提供了readonly的方法preadonly會返回原生對象的只讀 n在開發(fā)中常見的readonly 傳入三個類型的參數(shù)p類型一：普通對象p類型二：reactive返回的對象p類型三：ref的對象

n在readonlypreadonly返回的對象都是不允許修改p但是經(jīng)過readonly處理的原來的對象ü比如constinfo=readonly(obj)，info對象是不允許被修改ü當(dāng)obj被修改時，readonly返回的info對象ü但是我們不能去修改readonly返回的對象p其實(shí)本質(zhì)上就是readonly返回的對象的setter方法

n那么這個readonlyp在我們傳遞給其他組件數(shù)據(jù)時，往往希望其他組件使用我們傳遞的內(nèi)容，但是不允許它們修改時，就可以使用

np檢查對象是否是由reactive或readonly創(chuàng)建 np檢查對象是否是由reactive創(chuàng)建的響應(yīng) p如果 是readonly建的，但包裹了由reactive創(chuàng)建的另一 ，它也會返回np檢查對象是否是由readonly創(chuàng)建的只 np返回reactive或 的原始對象（不建議保留對原始對象的持 。請謹(jǐn)慎使用）np創(chuàng)建一個響應(yīng) ， 其自身property的響應(yīng)性，但不執(zhí)行嵌套對象 響應(yīng)式轉(zhuǎn)換 np創(chuàng)建一 ，使其自身的property為只讀，但不執(zhí)行嵌套對象的深度只讀轉(zhuǎn)換 還是可讀、可寫的）

n如果我們使用ES6的解構(gòu)語法，對reactive返回的對象進(jìn)行解構(gòu)獲取值，那么之后無論是修改結(jié)構(gòu)后的變量，還是修改reactiven那么有沒有辦法讓我們解構(gòu)出來的屬性是響應(yīng)式pVue為我們提供了一個toRefs的函數(shù)，可以將reactive返回的對象中的屬性都轉(zhuǎn)成pnameageref的 n如果我們只希望轉(zhuǎn)換一個reactive對象中的屬性為ref,那么可以使用toRef的方法

nn如果我們想要獲取一個 中的value，那么也可以通過unref方法p如果參數(shù)是一個ref，則返回內(nèi)部值，否則返回參數(shù)本身p這是val=isRef(val