前端學習筆記—Vue3特性

一、 Vue3與Vite構建工具簡介

image.png
image.png

image.png

image.png

Vite構建工具(其他的打包工具有webpack,grunt,gulp)

image.png
image.png
構建

二、創建Vue3項目

  • vite在TypeScript結合使用上,直接開箱即用,不需要額外配置。
  • Vue3語法兼容Vue2語法。Vue3的setup與Vue2的data、methods可以同時存在使用,但是不建議這樣操作,優先使用setup組合式返回值。setup是先于beforeCreate、data等鉤子執行的,所以在data中可以通過this讀取出setup返回值,反之不可。


    構建1
構建vue3項目
image.png
實操創建
依賴添加異常,需要檢查網絡或代理時,嘗試使用國內鏡像源,這里經常會有小坑,更換為國內鏡像源以提高穩定性:

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,保存數據狀態
vue2

hook組合式封裝,發揮了Vue3組件化開發的魅力。


vue3
image.png
setup案例
setup簡化
image.png

四、ref與reactive響應式

  • 基本類型的響應式數據,只能使用ref
基本類型
  • 對象類型的響應式數據

1.reactive方式,只能定義對象類型。在setup中只需要取出使用即可,如car.price=200觸發響應式和賦值。


reactive對象類型

2.ref處理對象類型響應式,底層使用的還是reactive


image.png
image.png
  • ref和reactive區別

分配不同對象時,對于ref只需要car.value=新對象,而對于reactive需要借助Object.assign(被替換對象,新對象1,新對象2...)。ref包裹定義基本數據類型和對象數據類型,而reactive只能定義對象數據類型。

image.png

car.value=ref({brand:'五菱',price:50})替換賦值生成一個新對象
Object.assign(car,{brand:'五菱',price:50})對象內屬性一一對應覆蓋,還是原來的對象

image.png
  • toRefs與 toRef 使用

作用:將一個響應式對象中的每一個屬性,轉換為ref 對象
備注:toRefs與 toRef 功能一致,但 toRefs 可以批量轉換整個對象,toRef只能轉指定值。結構體name修改,person內對應的屬性值也會響應式變化。

image.png

  • 響應式對象取值特殊情況
image.png

五、計算屬性

引入import { reactive,ref, toRef, toRefs,computed } from 'vue'
同樣使用的時候通過computed 包裹要計算的內容函數


image.png

六、watch屬性

image.png
image.png
image.png
  • 1.監視 ref 定義的【基本類型】數據:直接寫數據名即可,監視的是其 value 值的改變。調用這個函數可以終止監聽,比如函數名stopwatch()
image.png
  • 2.監視對象:監視ref對象。

不管是ref還是reactive監視一整個對象時而不是某個非對象屬性,則只要外圍對象沒有生成新的對象賦值,則newValue、oldValue都是指向新值。雖然對象內屬性改動變化了,但是對象還是那個對象,對象地址值不變。


image.png
image.png
  • 3.監視對象:監視reactive對象。

reactive只能定義對象,所以只能監視整個對象,這個模式默認開啟深度監視,且無法關閉。深度監視開啟后,就可以監視對象內的某個任意屬性變化。


image.png
  • 4.偵聽對象內的某個特定屬性,其他屬性不監視

對象子屬性:基本類型屬性


image.png

對象子屬性:對象類型屬性。手動開啟深度監視。


image.png
image.png
  • 5.偵聽多個屬性,寫成數組形式
image.png

七、watchEffect屬性

image.png
image.png

八、標簽節點的ref屬性

image.png
image.png

九、組件傳參:defineProps屬性

defineProps接收組件傳遞的參數。defineXXX都不需要直接引用,是屬于宏函數。

image.png

十、Vue3生命周期

  • setup函數替代了Vue2中beforeCreate、created生命周期。
  • 程序解析到子組件時,子組件的可執行的生命周期全部經歷后,才會繼續執行父組件剩余生命周期。


    image.png

十一、Vue3的Hooks

Hooks的使用替換了Vue2中mixin的使用,是實現組合式API開發的關鍵。可以在創建的Hooks的useXXX文件函數里面封裝你的代碼,也可以使用生命周期鉤子函數。合理的封裝你的功能模塊。

useDog.ts
useSum.ts
使用hooks

十二、Vue3的路由

  • Vue3和Vue2路由使用基本相同。
image.png
  • 路由器工作模式
image.png
image.png
image.png
image.png
  • 路由傳參

1.query傳參,兩種寫法方式。字符串寫法和對象寫法。

image.png

2.params傳參,也是有兩種寫法方式。字符串寫法和對象寫法。但是注意這時候,只能使用name路由路徑寫法。注意,這種寫法不可以傳遞對象和數組。

image.png

路由配置props:true,所有路由器接收參數都轉換為組件屬性

image.png

路由配置props其他寫法

image.png

3.編程式路由器userRouter使用,RouterLink標簽可以用的api屬性userRouter也可以用

image.png

image.png

4.重定向路由導航redirect使用。可用于程序初始化頁面顯示的組件內容。

image.png

十三、Vuex狀態管理升級為Vue3的Pinia

  • 下載、安裝、初始化


    image.png
npm i pinia 安裝下載
image.png
  • 存儲和讀取數據


    image.png
image.png
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)
}
actions修改方式
  • pinia的storeToRefs響應式數據使用。storeToRefs只會關注sotre中數據,不會對方法進行ref包裹。


    image.png
  • pinia的getters


    image.png
image.png
  • pinia訂閱監聽數據變化。在組件使用到的地方訂閱。


    image.png
  • pinia選項式寫法和組合式寫法


    選項式寫法
組合式寫法

十四、組件間通信方式

  • 1.props傳參方式通信(使用頻率高)


    image.png
image.png
  • 2.emit自定義事件通信(使用頻率高)


    image.png
  • 3.mitt全局事件通信(使用頻率高)。類似vue2全局事件總線。mitt可以實現任意組件間通信。
    注意在onUnmounted組件銷毀時卸載綁定的事件,調用emitter.off('事件名')解綁,節省資源。


    image.png
image.png
  • 4.v-model通信。
    實現雙向綁定的原理


    image.png
image.png

封裝一個雙向綁定username值的v-model組件功能,實現父與子組件(input類型)的雙向通信。在子組件呈現父組件傳遞過來的modelValue參數,并且給父組件發送自定義事件,將值回傳賦值給username。


image.png
更改value
  • 5.attrs實現爺爺組件向孫子組件通信。兒子組件需要設置attrs綁定。


    image.png
image.png
image.png
  • 6.refs與parent實現組件通信。
    image.png
  • 7.provide與inject實現組件通信。provide祖向孫通信,inject接收注冊。


    image.png
image.png

十四、插槽slot。也是組件件通信的一種方式,多用于ui構建。

  • 默認插槽。名稱默認是<slot name='default' >
image.png
image.png
  • 具名插槽。v-slot='abc'可以簡寫為#abc
image.png
  • 作用域插槽。

數據在子那邊,但根據數據生成的結構,卻由父親決定。
如:壓歲錢在孩子那,但根據壓歲錢買的東西,卻由父親決定。


image.png

十五、響應式數據其他api補充

  • 淺層次響應式:淺層次雙向綁定響應式shallowRef、shallowReactive
image.png
  • 單向只讀響應式readOnly(深層次)、shallowReadOnly(淺層次)
image.png
image.png
image.png
  • toRaw與martRaw

toRaw對響應式數據剝殼,得到無響應式功能的原始數據對象,多用于傳參的時候


image.png

markRaw永久性的設置為原始數據對象


image.png
image.png
  • 自定義Ref,customRef。

實現Ref響應式功能


Ref基本原理使用

customRef:在原生Ref功能上加上自己的處理邏輯
如實現一個延時更新的Ref,封裝成hooks


customRef實現

十六、Teleport使用

image.png
image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容