1.核心語法
1. 1選項式和組合式的區(qū)別
Vue2的API設(shè)計是Options(選項)風(fēng)格的。
Vue3的API設(shè)計是Composition(組合)風(fēng)格的。
Options類型的 API，數(shù)據(jù)、方法、計算屬性等，是分散在：data、methods、computed中的，若想新增或者修改一個需求，就需要分別修改：data、methods、computed，不便于維護(hù)和復(fù)用。而組合式的可以用函數(shù)的方式，更加優(yōu)雅的組織代碼，讓相關(guān)功能的代碼更加有序的組織在一起。
1.2 setup概述
setup是Vue3中一個新的配置項，值是一個函數(shù)，它是 Composition API “表演的舞臺”，組件中所用到的：數(shù)據(jù)、方法、計算屬性、監(jiān)視......等等，均配置在setup中。Vue2 的配置(data、methos......)中可以訪問到 setup中的屬性、方法。但在setup中不能訪問到Vue2的配置(data、methos......)。如果與Vue2沖突，則setup優(yōu)先.
特點如下：
setup函數(shù)返回的對象中的內(nèi)容，可直接在模板中使用。
setup中訪問this是undefined。
setup函數(shù)會在beforeCreate之前調(diào)用，它是“領(lǐng)先”所有鉤子執(zhí)行的。
示例:
1.3 ref
作用: 定義響應(yīng)式變量
語法: let xxx = ref(初始值)
返回值: 一個RefImpl的實例對象，簡稱ref對象或ref，ref對象的value屬性是響應(yīng)式的
注意點：
JS中操作數(shù)據(jù)需要：xxx.value，但模板中不需要.value，直接使用即可。
對于let name = ref('研博')來說，name不是響應(yīng)式的，name.value是響應(yīng)式的
特點:
其實ref接收的數(shù)據(jù)可以是：基本類型、對象類型。
若ref接收的是對象類型，內(nèi)部其實也是調(diào)用了reactive函數(shù)。
1.4 reactive
作用：定義一個響應(yīng)式對象
語法：let 響應(yīng)式對象= reactive(源對象)。
返回值：一個Proxy的實例對象，簡稱：響應(yīng)式對象。
注意點：
reactive定義的響應(yīng)式數(shù)據(jù)是“深層次”的。
reactive在JS中操作數(shù)據(jù)不需要：xxx.value
基本類型不能使用reactive，要用ref，否則報錯
1.5 ref和reactive對比
ref用來義：基本類型數(shù)據(jù)、對象類型數(shù)據(jù);
reactive用來定義：對象類型數(shù)據(jù)。
區(qū)別：
ref創(chuàng)建的變量必須使用.value(可以使用volar插件自動添加.value)。
reactive重新分配一個新對象，會失去響應(yīng)式(可以使用Object.assign去整體替換)。
使用原則：
若需要一個基本類型的響應(yīng)式數(shù)據(jù)，必須使用ref。
若需要一個響應(yīng)式對象，層級不深，ref、reactive都可以。
若需要一個響應(yīng)式對象，且層級較深，推薦使用reactive。
1.6 computed
作用：computed是Vue中一個計算屬性，它可以根據(jù)依賴的數(shù)據(jù)動態(tài)計算出一個新的值，并將其緩存起來。computed屬性是基于它們的依賴進(jìn)行緩存的，只有當(dāng)依賴發(fā)生變化時，才會重新計算。
computed屬性具有以下特性：
緩存：computed屬性會緩存計算結(jié)果，在依賴不變時直接返回緩存值，提高性能。
響應(yīng)式：當(dāng)依賴發(fā)生變化時，computed屬性會自動重新計算并更新。
依賴追蹤：Vue會自動追蹤computed屬性所依賴的數(shù)據(jù)，并在其發(fā)生變化時觸發(fā)重新計算。
示例:
1.7 watch
作用：監(jiān)視數(shù)據(jù)的變化(和Vue2中的watch作用一致)
特點：Vue3中的watch只能監(jiān)視以下四種數(shù)據(jù)：
(1)ref定義的數(shù)據(jù)。
(2)reactive定義的數(shù)據(jù)。
(3)函數(shù)返回一個值(getter函數(shù))。
(4)一個包含上述內(nèi)容的數(shù)組。
示例:
2. 組件通信
2.1 props
概述：props是使用頻率最高的一種通信方式，常用與 ：父子組件通信
若 父傳子：屬性值是非函數(shù)。
若 子傳父：屬性值是函數(shù)。
父組件:
子組件:
2.2 emit(子傳父)
emit 是一種機制，用于在子組件中觸發(fā)事件,并在父組件中監(jiān)聽這些事件
子組件:
父組件監(jiān)聽子組件：
2.3 mitt
概述：與消息訂閱與發(fā)布功能類似，可以實現(xiàn)任意組件間通信。
2.3.1安裝mitt
npm i mitt
2.3.2新建文件
2.3.3 使用emitt
接收數(shù)據(jù)的組件中：綁定事件、同時在銷毀前解綁事件：
提供數(shù)據(jù)的組件，在合適的時候觸發(fā)事件
2.4 v-model
在一些前端ui框架中比較常用的一種方式
(1)概述：實現(xiàn)父子組件之間相互通信。
(2)v-model的本質(zhì):
(3)組件標(biāo)簽上的v-model的本質(zhì)：:moldeValue + update:modelValue事件
YanbootInput 組件中:
(4)也可以更改value,例如改為yanboot
YanbootInput 組件中:
(5)如果value可以更換，那么就可以在組件標(biāo)簽上多次使用v-model
