組件的簡(jiǎn)介：是vue中的一種思想?封裝html 方便我們獨(dú)立的或者復(fù)用的代碼進(jìn)行頁(yè)面的構(gòu)建，

什么是ui組件庫(kù)：是提前封裝好了的項(xiàng)目的公共組件，減少代碼的冗余，方便后期的維護(hù)。

組件的關(guān)系：只要被調(diào)用了 就是子組件。

封裝思想：公共組件和頁(yè)面組件， 公共組件增加代碼的復(fù)用性，便于后期維護(hù)。頁(yè)面組件 增加了代碼的可讀性 ，也便于

后期的維護(hù) 。

組件的通信：父?jìng)髯?用props??子傳父 $emit??詳細(xì)用法 props可以寫(xiě)單個(gè)屬性 也可以寫(xiě)數(shù)字組 也可以對(duì)象??

一般用的都是對(duì)象 props:{屬性名：類(lèi)型，type:類(lèi)型,required:布爾,default:默認(rèn)值},

$emit 發(fā)送通知的語(yǔ)法 不同的頁(yè)面調(diào)用相同的子組件 實(shí)現(xiàn)的是不同的邏輯 所以得 用$emit 將事件傳給父組件使用

this.$emit("自定義事件",參數(shù))???父組件接受使用?@自定義事件="(形參)=>{邏輯代碼}"

細(xì)節(jié)：vue3中直接寫(xiě)原生事件是生效的 但是會(huì)和自定義事件重復(fù)?解決：emits：[ 'click'];

vue2中直接寫(xiě)原生事件是不生效的??必須得使用自定事件。

通過(guò)provide提供可以被后代組件注入值?inject聲明要通過(guò)從上層提供方匹配并注入進(jìn)當(dāng)前組件的屬性；

??

單向數(shù)據(jù)流：子組件通過(guò)props接受的父組件的數(shù)據(jù)只能父組件修改 子組件無(wú)法修改，?

組件通信 插槽slot： 默認(rèn)插槽：定義組件<slot></slot>調(diào)用組件的雙標(biāo)簽內(nèi)自動(dòng)填入??內(nèi)部可以解析超文本，

???????????????具名插槽：定義組件<slot name="標(biāo)識(shí)"></slot>?調(diào)用時(shí) <template #標(biāo)識(shí)></template>

???????????????作用域插槽：定義組件<slot name="標(biāo)識(shí)" a='1' :b='c'></slot>?調(diào)用時(shí) <template #標(biāo)識(shí)='props'></template>

動(dòng)態(tài)組件：<component :is="who"></component>

可以動(dòng)態(tài)的切換需要的子組件

內(nèi)置組件transition

??單元素/組件過(guò)渡

?????1.寫(xiě)頁(yè)面布局樣式

?????2.控制元素的隱藏顯示 v-if/v-show

?????3. 使用transition將代碼包裹起來(lái)???

?????????enter-active-class??進(jìn)入

??????????leave-active-class??離開(kāi)

?????????appear????????首次刷新進(jìn)來(lái)觸發(fā)

?????多元素過(guò)渡

?????transition 有兩個(gè)標(biāo)簽??必須用v-if??

?????mode??"out-in"??/??"in-out"

??

?內(nèi)置組件KeepAlive

?????KeepAlive 是一個(gè)內(nèi)置組件，?在多個(gè)組件間動(dòng)態(tài)切換時(shí)緩存被移除的組件實(shí)例

?????最大緩存數(shù)

????????keepalive?:max='num'

????????緩存實(shí)例的生命周期

????????沒(méi)有keepalive 組件切換會(huì)觸發(fā)銷(xiāo)毀destroyed 和創(chuàng)建 created/mounted

????????有keepalive??組件切換不會(huì)觸發(fā)銷(xiāo)毀destroyed 創(chuàng)建created/mounted 只會(huì)首次觸發(fā)

????????內(nèi)置組件Teleport?

????????組件創(chuàng)建時(shí)只會(huì)在app根目錄下

?vue3 和 vue2 的區(qū)別

v3棄用：filter過(guò)濾器??大道至簡(jiǎn)還使用以前的methods

????mixin混入?參考react改成了hooks 下周一

v3新增：teleport 把代碼放到指定位置避免樣式污染、emits 讓自定義事件重寫(xiě)原生事件?避免重復(fù)觸發(fā)

v3原理：Object.defineProperty 改成 Proxy?

組合式API的好處?

??把data methods?computed 統(tǒng)一放到setup中一起寫(xiě) 增強(qiáng)代碼的可讀性 ，方便后期的維護(hù)。

??ref reactive

??ref 響應(yīng)式對(duì)象refImpl{value :get/set}

??reactive 代理對(duì)象

??區(qū)別: 1. 數(shù)據(jù) ref返回響應(yīng)式對(duì)象??reactive返回代理對(duì)象

??????2.使用?ref操作數(shù)據(jù)需要.value，template模板中不需要?reactive都不需要,value

??????3.原理?ref通過(guò)Object.defineProperty()的get和set實(shí)現(xiàn)數(shù)據(jù)代理

??????reactive使用Proxy實(shí)現(xiàn)數(shù)據(jù)代理，并且通過(guò)Reflect操作源對(duì)象內(nèi)部的數(shù)據(jù)