一、 Vue3與Vite構建工具簡介
Vite構建工具(其他的打包工具有webpack,grunt,gulp)
二、創建Vue3項目
- vite在TypeScript結合使用上,直接開箱即用,不需要額外配置。
-
Vue3語法兼容Vue2語法。Vue3的setup與Vue2的data、methods可以同時存在使用,但是不建議這樣操作,優先使用setup組合式返回值。setup是先于beforeCreate、data等鉤子執行的,所以在data中可以通過this讀取出setup返回值,反之不可。
構建1
依賴添加異常,需要檢查網絡或代理時,嘗試使用國內鏡像源,這里經常會有小坑,更換為國內鏡像源以提高穩定性:
1使用淘寶鏡像:
npm config set registry https://registry.npmmirror.com
2.使用騰訊鏡像:
npm config set registry https://mirrors.cloud.tencent.com/npm/
3.使用華為鏡像:
npm config set registry https://repo.huaweicloud.com/repository/npm/
4.檢查當前鏡像源:
npm config get registry
三、Vue2與Vue3項目api區別
- Vue2使用選項式Api,Vue3使用組合式Api
- template內,Vue3可以不需要根節點,Vue2必須包含唯一 一個根節點。
- Vue3支持TypeScript
- Vue3使用Vite打包,Vue2使用WebPack打包,且提升了打包速度
- Vue3的Hooks替代Vue2的mixin,整合數據方法
- Vue3的Pinia替代Vue2的VueX,保存數據狀態
hook組合式封裝,發揮了Vue3組件化開發的魅力。
四、ref與reactive響應式
-
基本類型的響應式數據,只能使用ref
-
對象類型的響應式數據
1.reactive方式,只能定義對象類型。在setup中只需要取出使用即可,如car.price=200觸發響應式和賦值。
2.ref處理對象類型響應式,底層使用的還是reactive
-
ref和reactive區別
分配不同對象時,對于ref只需要car.value=新對象,而對于reactive需要借助Object.assign(被替換對象,新對象1,新對象2...)。ref包裹定義基本數據類型和對象數據類型,而reactive只能定義對象數據類型。
car.value=ref({brand:'五菱',price:50})替換賦值生成一個新對象
Object.assign(car,{brand:'五菱',price:50})對象內屬性一一對應覆蓋,還是原來的對象
-
toRefs與 toRef 使用
作用:將一個響應式對象中的每一個屬性,轉換為ref 對象
備注:toRefs與 toRef 功能一致,但 toRefs 可以批量轉換整個對象,toRef只能轉指定值。結構體name修改,person內對應的屬性值也會響應式變化。
-
響應式對象取值特殊情況
五、計算屬性
引入import { reactive,ref, toRef, toRefs,computed } from 'vue'
同樣使用的時候通過computed 包裹要計算的內容函數
六、watch屬性
-
1.監視 ref 定義的【基本類型】數據:直接寫數據名即可,監視的是其 value 值的改變。調用這個函數可以終止監聽,比如函數名stopwatch()
-
2.監視對象:監視ref對象。
不管是ref還是reactive監視一整個對象時而不是某個非對象屬性,則只要外圍對象沒有生成新的對象賦值,則newValue、oldValue都是指向新值。雖然對象內屬性改動變化了,但是對象還是那個對象,對象地址值不變。
-
3.監視對象:監視reactive對象。
reactive只能定義對象,所以只能監視整個對象,這個模式默認開啟深度監視,且無法關閉。深度監視開啟后,就可以監視對象內的某個任意屬性變化。
-
4.偵聽對象內的某個特定屬性,其他屬性不監視
對象子屬性:基本類型屬性
對象子屬性:對象類型屬性。手動開啟深度監視。
-
5.偵聽多個屬性,寫成數組形式
七、watchEffect屬性
八、標簽節點的ref屬性
九、組件傳參:defineProps屬性
defineProps接收組件傳遞的參數。defineXXX都不需要直接引用,是屬于宏函數。
十、Vue3生命周期
- setup函數替代了Vue2中beforeCreate、created生命周期。
-
程序解析到子組件時,子組件的可執行的生命周期全部經歷后,才會繼續執行父組件剩余生命周期。
image.png
十一、Vue3的Hooks
Hooks的使用替換了Vue2中mixin的使用,是實現組合式API開發的關鍵。可以在創建的Hooks的useXXX文件函數里面封裝你的代碼,也可以使用生命周期鉤子函數。合理的封裝你的功能模塊。
十二、Vue3的路由
-
Vue3和Vue2路由使用基本相同。
-
路由器工作模式
-
路由傳參
1.query傳參,兩種寫法方式。字符串寫法和對象寫法。
2.params傳參,也是有兩種寫法方式。字符串寫法和對象寫法。但是注意這時候,只能使用name路由路徑寫法。注意,這種寫法不可以傳遞對象和數組。
路由配置props:true,所有路由器接收參數都轉換為組件屬性
路由配置props其他寫法
3.編程式路由器userRouter使用,RouterLink標簽可以用的api屬性userRouter也可以用
4.重定向路由導航redirect使用。可用于程序初始化頁面顯示的組件內容。
十三、Vuex狀態管理升級為Vue3的Pinia
-
下載、安裝、初始化
image.png
npm i pinia 安裝下載
-
存儲和讀取數據
image.png
- pinia內容值修改的方式。修改就是vuex里的actions+mutations(相當于setters)。
// 數據
let select=ref(1)// 用戶選擇的數字
// 方法
function xiugai(){
// 第一種對源數據直接修改方式,直接操作三次
countstore.sum += 1
countstore.school= '黑馬培訓'
countstore.address= '深圳'
// 第二種patch修改方式,一次數據操作
countstore.$patch(
{
sum:888,
school:'尚硅谷,
address:'北京
})
// 第三種actions修改方式,抽離共同修改,復用多
countstore.increment(select.value)
}
-
pinia的storeToRefs響應式數據使用。storeToRefs只會關注sotre中數據,不會對方法進行ref包裹。
image.png -
pinia的getters
image.png
-
pinia訂閱監聽數據變化。在組件使用到的地方訂閱。
image.png -
pinia選項式寫法和組合式寫法
選項式寫法
十四、組件間通信方式
-
1.props傳參方式通信(使用頻率高)
image.png
-
2.emit自定義事件通信(使用頻率高)
image.png -
3.mitt全局事件通信(使用頻率高)。類似vue2全局事件總線。mitt可以實現任意組件間通信。
注意在onUnmounted組件銷毀時卸載綁定的事件,調用emitter.off('事件名')解綁,節省資源。
image.png
-
4.v-model通信。
實現雙向綁定的原理
image.png
封裝一個雙向綁定username值的v-model組件功能,實現父與子組件(input類型)的雙向通信。在子組件呈現父組件傳遞過來的modelValue參數,并且給父組件發送自定義事件,將值回傳賦值給username。
-
5.attrs實現爺爺組件向孫子組件通信。兒子組件需要設置attrs綁定。
image.png
- 6.
parent實現組件通信。
image.png
-
7.provide與inject實現組件通信。provide祖向孫通信,inject接收注冊。
image.png
十四、插槽slot。也是組件件通信的一種方式,多用于ui構建。
-
默認插槽。名稱默認是<slot name='default' >
-
具名插槽。v-slot='abc'可以簡寫為#abc
-
作用域插槽。
數據在子那邊,但根據數據生成的結構,卻由父親決定。
如:壓歲錢在孩子那,但根據壓歲錢買的東西,卻由父親決定。
十五、響應式數據其他api補充
-
淺層次響應式:淺層次雙向綁定響應式shallowRef、shallowReactive
-
單向只讀響應式readOnly(深層次)、shallowReadOnly(淺層次)
-
toRaw與martRaw
toRaw對響應式數據剝殼,得到無響應式功能的原始數據對象,多用于傳參的時候
markRaw永久性的設置為原始數據對象
-
自定義Ref,customRef。
實現Ref響應式功能
customRef:在原生Ref功能上加上自己的處理邏輯
如實現一個延時更新的Ref,封裝成hooks