Vue3學習二

認識組件的嵌套

還可以將Main中內容再劃分

scoped防止組件與組件之間的樣式相互污染

組件的通信

父子組件之間通信的方式

父組件傳遞給子組件

給傳過來的內容做限制

type為傳的內容的屬性類型，required為true表示該內容是必須傳的，default為，如果沒人傳該類型，就會傳123

type的類型

對象類型的其他寫法

為Object類型時，需要是函數，然后返回一個對象

Prop的大小寫命名

非Prop的Attribute

attribute就是class，id等屬性。

這的class=‘why’

傳遞到了這的div上

禁用Attribute繼承和多個根節點

使用禁用后，class=‘bol’就不在div中了，

你可以指定元素綁定屬性，使用attrs將屬性指定元素class綁定給h2了，，此時被禁用的attribute就被h2繼承

如果要繼承的屬性比較多，比如要綁定class，id等，那么可以直接這樣，就會將class，id等都綁定

多個跟節點也是在需要的地方指定即可

子組件傳遞給父組件

自定義事件流程

自定義事件的參數和驗證

?參數傳遞

驗證

null代表不需要驗證

一個參數時可以取名為payload

如果取值比10小還是會傳過去，但是會報錯

練習

父組件傳遞給子組件，

我們在父組件的data中定義了成員titles，他里面是一個數組。通過父組件傳遞給子組件，將其傳入子組件，以便子組件使用。其中contens成員為元素對應要展示的內容。currentIndex為要展示的內容的下標

子組件傳遞給父組件

父組件中對應的方法titleClick中的參數index就是子組件傳來的，這次的傳遞需要使父組件實現點擊的title元素內容與contents內容相對應，所以獲取，子組件的index，而子組件的index為當前點擊的元素的下標

綁定class屬性，設置樣式，括號內容為，如果currentIndex與index相等，那么active為true，那么active樣式就會展示，currentIndex的值為當前點擊的元素的下標

使用v-for遍歷使用從父組件獲取到的titles數組內容，title為當前下標index時的內容。

點擊事件，

將當前點擊的元素的index傳入方法itemClick中，將currentIndex的值設為當前點擊的元素的index，然后將當前點擊元素下標index傳入到父組件

emits為傳入父組件的內容，props為父組件傳入子組件的內容，設置了內容的類型和如果沒傳入，默認為空數組

非父子組件的通信

Provide和Inject

Provide和Inject基本使用

Provide和inject函數的寫法

想要拿到names的長度，這樣是不對的，他是this指向的是個undefined，一個對象并不是作用域，所以這樣肯定不行的

處理響應式數據

?將他寫成一個函數就可以解決這個問題，因為是函數，源碼會將他的this與這個組件實例綁定起來。

通過這樣給names添加元素，元素會變多，但是獲取的length固定了不會再改變，所以需要length跟著一起改變這樣是不行的

可以通過computed來實現，但是computed返回的是一個ref對象，值存在value中

不過可能是改了。我這使用，反而不用.value可以得到值

全局事件總線mitt庫

使用事件總線工具

homeContent會根據這里的內容，獲取對應的值，如果emitter.on的第一個參數為why，那么info對應的內容就是emitter.emit第一個參數為why的第二參數的內容

Mitt的事件取消

認識插槽Slot

如何使用插槽slot

插槽的默認內容

?多個插槽的效果

?具名插槽的使用

動態插槽名

具名插槽使用的時候縮寫

渲染作用域

?

認識作用域插槽

作用域插槽的案例

1.先通過prop從父組件中獲取數組names的值

2.使用v-for循環獲取到的names的值，

3.將names中獲取的值綁定在插槽中。

4.父組件先綁定默認插槽default，之所以默認，是因為沒有命名，然后將其賦值，值的名字slotProps為自定義的，里面可以獲取到綁定在插槽中的內容。

這樣就可以根據獲取到的names中的值個數而調用相應個數的插槽。

slotprop可以自己取

獨占默認插槽的縮寫

默認插條可以這么寫

默認插槽和具名插槽混合

如果有兩個插條，就不能默認

動態組件的實現

1.遍歷es數組，數組中的值是需要動態添加的組件名

2.按鈕點擊ClickINt中是將es當前遍歷到的內容賦值給變量Content，is前面添加：才是動態的，

使用動態組件實現，如果不加：就給寫死了綁定的組件，

給動態組件傳遞數據

動態組件切換后是會銷毀的，比如，點擊about來到這個組件，使用他的累加按鈕，加到任意數字，再切換到其他組件，然后再切回來就會發現原來累加的數字為0了，重新開始了

需要加冒號是為了不被識別成字符串

最后給每個組件加上name屬性，因為include是根據name來確定組件的

Webpack的代碼分包

通過import函數的方式去導入Math.vue模塊，只有通過該方法導入的模塊，后續就會進行分包的操作。因為一般，所有自己敲的模塊都會打包到一個.js文件中

Vue中實現異步組件

異步組件的寫法二

這是第二種方法，loadingComponent表示如果當前組件還沒加載除了，就讓Loading組件先占位展示

異步組件和Supense

如果default的內容顯示不了，就顯示fallback下的

$refs的使用

想要訪問子組件的內容只需要用 . 即可

對子組件的方法調用也不在話下

$parent和$root

也可以拿到跟組件

就算一個組件被幾個組件引用，那么他也只有一個父組件，因為是按單個算的，比如左邊引用他，那么在在左邊里，他就左邊那一個父組件，反之，右邊也是

el拿到的是根元素

認識生命周期

生命周期流程

一開始組件組件創建之前會進行初始化操作，然后在初始化后，創建組件前會回調一個beforeCreate，然后再開始初始化，注入和響應性，初始化，注入和響應性就創建了實例instant，之后又會回調created，created之后開始進行真正的掛載，判斷是否有template，如果有則編譯模版至渲染函數，如果沒有就編譯el的InnerHTML至模版，編譯完后，又回調一個beforeMount生命周期? ，然后開始把內容放入dom中，再回調mounted，掛載真正成功。如果該組件不再使用了，則回調一個beforeUmount，然后再開始卸載，卸載后，回調一個umounted，如果還是用，不卸載，改變了數據內容，那么就會回調一個beforeUpdate，刷新完后就會回調update

點擊按鈕后

、

查看更新前后的內容

v-if為fasle則內容會被刪除，不會顯示，也就是卸載該元素?

混存組件的生命周期

‘

v-model

在組件中使用了v-model相當于用了這一串語句效果，所以我們是需要去組件寫上modelValue元素的，并且寫上需要的事件，event在這里傳過來的不是元素而是對應的值

使用input綁定input的value，可以更改值，

想要 input中也使用v-model那么就需要設置一個computed，自定義一個屬性，讓input綁定，然后在該屬性中寫上get和set，get是當調用該屬性時使用，set是修改時使用

認識動畫

Vue的transition動畫

進來和離開后透明度為0，進來后和離開透明度為1

transition是設置指定樣式的過度效果，這里設置了opacity的效果 2s為過度時間，還可以設置先快后慢還是先慢后快，這里設置了ease

Transition組件的原理

過渡動畫Class

點擊時對應的屬性就會添加上

如果沒有給指定的name，那么就會默認為v

class添加的時機和命名規則

不寫這個也可以瀏覽器默認會給這個值

過度css動畫

只不使用transition使用的是animation，bounce為效果使用的部分，1s為時間，ease動畫執行曲線

bounce中的百分數為幀，里面設置相應幀時的大小，因為我們開始和結束需要有一樣的效果和樣式，但是離開時，幀為百分比，所以需要加上翻轉，分開寫，才能達到想要的效果

以上說到的效果可以一起使用。實現放大縮小淡出效果

同時設置過度和動畫

但是需要注意當兩個動畫同時出現時，需要添加屬性type，而type指定要按哪個效果走，

顯示的指定動畫時間

也可以指定效果時間，一旦指定了，那么代表下面再設置的時間就無效了

過度的模式mode

in-out屬性為先進入動畫在出去動畫

組件的使用

appear初次渲染

使用屬性appear，將他原本的默認值false設為true，那么在加載該內容時，就會有設置好的相應效果

認識animate.css

自定義過度class

一般除了加需要的效果的class，還會加這個

但是有些效果是需要翻轉才可以完美展示

認識gsap庫

?

隱藏顯示前三個，

?gsap庫的使用

target是給誰執行動畫，to是從默認狀態達到某個狀態，

el為元素，拿到要動畫的元素，done是默認你不去執行done的回調，在你還沒執行{}中的內容就會默認去調用done了

from是從{}中所寫的狀態達到默認狀態

所以一般會這么使用該內容。在onComplete中回調done。

這段意味著，從這個狀態回到初始狀態，從初始狀態到這個狀態

gsap實現數字變化

set的值為點擊之后會加那么多，當我們使用這個方法實現點擊上升號數字從原本的值多了指定的100時，他是立刻就改變的，沒有一個過渡的狀態，比如，值為0時，一改變就立刻從0變成100，而不是0,1,2，3.....轉變成為100，所以我們不能直接用counter來展示變化，需要重新寫一個方式實現

要實現該效果就需要再定義一個showNumber和使用偵聽器，偵聽我們得counter，當我們得counter有新值的時候，使用gsap對this的某個屬性賦值，我們對象中的內容表示，屬性showNumber在1s內newvalue一點點改變值賦值到showNumber。這樣就實現了所需效果，但是值得一點點改變是小數的改變。需要使用tofixed來設置保留幾位小數點，我們設置保留0位就是整數

????

可以不用computed的內容。也可以實現

認識列表的過渡

指定tag的意思就是你指定tag=‘div’，那么就會把元素包裹在div中

span為行內元素，在他顯示出來之前無法對他進行太多的操作，所以為了讓行內元素實現一系列效果，就不要將他設為inline-block效果，加absolute是因為刪除時要等要刪的元素完全消失才能移動，影響美觀，所以設置成absolute可以在沒完全消失時剩余的就開始慢慢移動

移除動畫要加

列表過渡的移動動畫

給元素做重新排序

befor-enter是寫死一個進入的初始狀態，為了更好的效果，讓消失的元素按序號一個個消失，那么我們需要獲取序號并且對于每個不同元素的延遲時間依次遞增才能實現依次消失，所以我們使用了v-for的index拿到每個元素序號，然后通過自定義屬性data并取名為index給每個元素設置他們對應的序號的值的data，通過js的知識可知所有自定義data都會放入到dataset中，所以我們只需要dataset.index就可以拿到對應的值，然后乘以我們需要的大小。，就可以設置遞增的延遲時間

filter高階函數，用來過濾的，indexof后判斷返回布爾值，為false時調用者不保留，true保留

認識Mixin

Mixin的合并規則

全局混入Mixin

extends

Options API的弊端

大組件的邏輯分散

認識Composition API

setup函數參數

想要拿到pops值那么就只需要將其傳入該函數即可

結構方式

當data和setup中有同名屬性，會使用setup的

在setup中定義一個變量。對他進行操作，他不會在界面上有響應式效果，之前返回的屬性都是對象成員屬性，會通過reactive（）進行處理

setup不可以使用this

在執行setup時把setup傳給了該函數

此時者的fn就為setup，會判斷fn中是否有參數，如果有則是個數組，mei

Reactive API

如果我們想要之前定義的變量在時顯示也要響應式，我們也可以讓他用reactive包裹

Ref API

Ref自動解包

因為拿到的是對象，所以按理來說需要.value拿到對應的值，但是template會對ref的對象進行解包，所以直接就可以使用

但是setup不會自動解包，所以就需要.value拿到值

當counter本身為對象時會進行解包。但是被賦給另一個對象時，不會對他進行解包

但是如果最外層包裹的是reactive可響應式對象，那么內容ref可以對couter進行解包

認識readonly

響應式和普通對象都不可修改

Reactive判斷的API

toRefs

使用后，直接使用結構后的那么name，age也是響應式

這樣結構后內容也是響應式的

toRef

這個返回的就是一個值，所以不需要結構，但是toRefs返回的是一個對象所以需要

ref其他的API

淺層響應式，也就是直接改值不會做出響應

如果淺層的想要觸發響應式，那么就需要使用triggerref

customRef

customRef案例

如果這樣的話，那么到時候導入的時候就需要這個方式導入

這樣就不用自定義函數名

然后導入customRef，因為custRef參數是函數，所以不可直接將value傳入，trank和tigger為收集依賴的時候，觸發依賴的時候

函數需要返回 get和set函數，

增加定時器就能實現防抖

computed

通過computed實現響應式，也是可以寫在setup中

通過按鈕調用chnageName實現內容的更改

computed返回值是一個ref對象

第二種方式

watchEffect

運行后watchEffect會立即執行一次，然后會自動收集響應式，他在立即執行的時候會看一下里面使用到了哪些可響應式內容，比如如下代碼中使用了name，那么就會把watchEffect中函數添加到name的依賴中，如果一開始不執行的話，就收集不了依賴。

獲取兩個值

當年齡為25時，停止監聽

watchEffect清除副作用

aaaa為自定義的一個名字，作為watchEffect的參數，他是一個函數，他的參數也是一個函數，在里面寫清楚額外副作用的操作

運行立刻會打印網絡請求成功，一直改變內容，不會，除非暫停幾秒

setup中使用ref

watchEffect的執行時機

一開始titile為null，執行到return語句時，將title內容掛載成功，此時title內容為h2內容

調整watchEffect的執行時機

想要內容更新完掛載完，再執行watchEffect內容，那么就需要添加參數flush。flush默認值為pre，為提前進行調用，現在設置為post，就會等內容掛載完畢，更新完畢才會執行

此時就不會再為null時調用，而是只有最終結果時內容

Watch的使用

偵聽單個數據源

需要寫一個個體函數，也就是這個，拿到需要偵聽的對象的內容，這里是拿到了偵聽對象info的name

watch本身調用了dowatch，

在dowatch中將所有source轉為getter，對source進行了判斷，其中判斷了如果是reactive就轉換成reactive的getter值，所以代表可以直接拿到reactive的類型，如果是reactive類型會直接通過getter返回source的，而source就是本reactive對象，所以后面拿到的newvalue或者oldvalue都是reactive對象

判斷的類型

ref對象類型，是直接拿到ref的值，

因為源碼通過getter是直接返回value的

如果希望是普通對象，那么就進行解構，此時會來到該判斷對該函數調用

如果你需要偵聽多個對象，那么就需要將source值寫成數組，此時就會來到這個判斷語句，通過map函數對source進行遍歷，然后再對每個元素進行類型的判斷

還可以進行解構

如果你不想他是reactive對象，那么你就可以這么寫，但是需要注意的是，不要少了小括號

偵聽響應式對象

watch的選擇

默認是可以深度監聽的，因為當我們類型為reactive時就把deep設為true了

但是你寫成普通對象，他就偵聽不到了

如果你想進行深度偵聽那么就需要添加deep并將他置為true

如果希望第一次也進行偵聽，也就是一來就偵聽，那么可以添加一個immediate，將其置為true?

生命周期鉤子

在setup使用生命周期函數，需要導入所需函數，并且，函數名在之前所學過的函數名前面多加一個on

給內容做更改就會調用onUpdata，這里是添加了內容

注冊多個相同的什么周期會同時都調用

Provide函數

Inject函數

將App.vue中數據提供給Home.vue，導入provide函數，函數中兩個參數為key和value，是鍵值對

Home.vue想使用App.vue通過provide傳輸的值時，需要使用inject來接收，inject參數可以有兩個，第一個為key第二個為默認值，默認值也可以不設置

數據響應式

但是上面App.vue中傳過來的值為不可響應的，所以就可以使用ref進行包裹將內容設置為可響應式

修改響應式Property

子組件對父組件進行更改操作是非常不好的，我們可以通過readonly阻止這個行為

將原本在setup寫的內容放入新建的.js文件中

在需要引用剛建的文件導入剛建的文件

然后再調用chu

也可以通過展開運算符。調用

title的改變等待3秒從默認值coderwhy變成kobe

可以給傳入的title設置默認值，然后為了使title能夠修改，是響應式的，所以需要使用到ref，設置偵聽，因為我們只需要偵聽到他的新值并將title改為新值，所以就只需要newValue，又因為watch是惰性的他不會立即執行，所以為了能顯示默認值，我們需要增加屬性immediate

useScrollPosition

實現滾動值的顯示

也可以抽取出來寫

首先還是需要導入

useLocalStorage

對你傳入的數據進行判斷，當你傳入的數據有value，那么就是需要保存該value，如果沒有value那么你可能會需要取出該key對應的value，如果是需要改變對應的key所對應的value，那么就需要使用watch偵聽，將新value與對應的key存入

保存后，可以直接用key拿到相應內容，進行更改

導文件太多，也可以將所有導入語句放入一個單獨的.js文件中

此時用到所需的文件導入就只需要這樣即可

知識補充：

可以在script標簽添加setup，這樣也可以實現需要的效果

如果要進行父組件子組件傳輸需要這樣

認識h函數

將template抓換成VNode，然后再轉換成elment，如果只使用template就無法充分使用到JavaScript的特性了，所以在template到VNode會經過編譯compile轉成render函數，render函數返回值是VNode，執行render函數就會轉換成VNode，render為函數那么就是JavaScript能力，所以我們自己去編寫render函數