柚子快報邀請碼778899分享：【前端框架】Vue3合集

http://yzkb.51969.com/

一、Vue3初識

1、create-vue

create-vue是Vue官方新的腳手架工具，底層切換到了 vite （下一代前端工具鏈），為開發(fā)提供極速響應(yīng)

前置條件：16.0或更高版本的Node.js

安裝并執(zhí)行 create-vue

npm init vue@latest

2、項目目錄和關(guān)鍵文件

二、組合式API

1、setup選項

執(zhí)行時機：在beforeCreate鉤子之前執(zhí)行

setup函數(shù)中，不能獲取this

在setup函數(shù)中寫的數(shù)據(jù)和方法需要在末尾以對象的方式return，才能給模版使用

2、setup語法糖

script標(biāo)簽添加 setup標(biāo)記，不需要再寫導(dǎo)出語句，默認(rèn)會添加導(dǎo)出語句

3、reactive和ref函數(shù)

1）reactive

接受對象類型數(shù)據(jù)的參數(shù)傳入并返回一個響應(yīng)式的對象

2）ref

（常用）

接收簡單類型或者對象類型的數(shù)據(jù)傳入并返回一個響應(yīng)式的對象

本質(zhì)：在原有傳入數(shù)據(jù)的基礎(chǔ)上，包成了對象

4、computed

計算屬性基本思想和Vue2保持一致，組合式API下的計算屬性只是修改了API寫法

計算屬性中不應(yīng)該有“副作用”（異步請求/修改dom => watch）避免直接修改計算屬性的值

5、watch

1）偵聽單個數(shù)據(jù)

// 1. 導(dǎo)入watch

import { ref, watch } from 'vue'

const count = ref(0)

// 2. 調(diào)用watch 偵聽變化

watch(count, (newValue, oldValue) => {

console.log(`count發(fā)生了變化，老值為${oldValue},新值為${newValue}`)

})

2）偵聽多個數(shù)據(jù)

// 1. 導(dǎo)入watch

import { ref, watch } from 'vue'

const count = ref(0)

const name = ref('cp')

// 2. 調(diào)用watch 偵聽變化

watch([count, name], ([newCount, newName],[oldCount,oldName]) => {

console.log(`count或者name變化了，[newCount, newName],[oldCount,oldName]`)

})

3）immediate

在偵聽器創(chuàng)建時立即觸發(fā)回調(diào)，響應(yīng)式數(shù)據(jù)變化之后繼續(xù)執(zhí)行回調(diào)

// 1. 導(dǎo)入watch

import { ref, watch } from 'vue'

const count = ref(0)

// 2. 調(diào)用watch 偵聽變化

watch(count, (newValue, oldValue) => {

console.log(`count發(fā)生了變化，老值為${oldValue},新值為${newValue}`)

},{

immediate: true

})

4）deep

通過watch監(jiān)聽的ref對象默認(rèn)是淺層偵聽的，直接修改嵌套的對象屬性不會觸發(fā)回調(diào)執(zhí)行，需要開啟deep深度監(jiān)聽

// 1. 導(dǎo)入watch

import { ref, watch } from 'vue'

const state = ref({ count: 0 })

// 2. 監(jiān)聽對象state 并開啟deep

watch(state, () => {

console.log('數(shù)據(jù)變化了')

},{

deep:true

})

const changeStateByCount = () => {

// 此時修改可以觸發(fā)回調(diào)

state.value.count++

}

6、生命周期函數(shù)

7、父子通信

1）父傳子

父組件中給子組件標(biāo)簽通過@綁定事件子組件內(nèi)部通過 emit 方法觸發(fā)事件

2）子傳父

父組件中給子組件標(biāo)簽通過@綁定事件子組件內(nèi)部通過 emit 方法觸發(fā)事件

8、模版引用

調(diào)用ref函數(shù)生成一個ref對象通過ref標(biāo)識綁定ref對象到標(biāo)簽

默認(rèn)情況下在

9、跨層組件通信

頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法，實現(xiàn)跨層組件通信

1）跨層傳遞普通數(shù)據(jù)

頂層組件通過 provide 函數(shù)提供數(shù)據(jù)底層組件通過 inject 函數(shù)提供數(shù)據(jù)

2）跨層傳遞響應(yīng)式數(shù)據(jù)

3）跨層傳遞方法

頂層組件可以向底層組件傳遞方法，底層組件調(diào)用方法修改頂層組件的數(shù)據(jù)

三、Vue3.3 新特性

1、defineOptions

背景說明：

有

2、defineModel

在Vue3中，自定義組件上使用v-model， 相當(dāng)于傳遞一個modelValue屬性，同時觸發(fā) update:modelValue 事件

我們需要先定義 props，再定義 emits。其中有許多重復(fù)的代碼。如果需要修改此值，還需要手動調(diào)用 emit 函數(shù)。

生效需要配置 vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [

vue({

script: {

defineModel: true

}

}),

],

resolve: {

alias: {

'@': fileURLToPath(new URL('./src', import.meta.url))

}

}

})

四、Pinia

1、Pinia概述

Pinia 是 Vue 的專屬的最新狀態(tài)管理庫 ，是 Vuex 狀態(tài)管理工具的替代品

2、添加Pinia到Vue項目

使用 Vite 創(chuàng)建一個空的 Vue3項目

npm init vite@latest

按照官方文檔安裝 pinia 到項目中

3、 Pinia基礎(chǔ)使用

4、getters實現(xiàn)

Pinia中的 getters 直接使用 computed函數(shù) 進(jìn)行模擬, 組件中需要使用需要把 getters return出去

5、action異步實現(xiàn)

異步action函數(shù)的寫法和組件中獲取異步數(shù)據(jù)的寫法完全一致

6、storeToRefs工具函數(shù)

使用storeToRefs函數(shù)可以輔助保持?jǐn)?shù)據(jù)（state + getter）的響應(yīng)式解構(gòu)

7、Pinia的調(diào)試

Vue官方的 dev-tools 調(diào)試工具 對 Pinia直接支持，可以直接進(jìn)行調(diào)試

8、Pinia持久化插件

官方文檔：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

安裝插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

使用 main.js

import persist from 'pinia-plugin-persistedstate'

...

app.use(createPinia().use(persist))

配置 store/counter.js

import { defineStore } from 'pinia'

import { computed, ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {

...

return {

count,

doubleCount,

increment

}

}, {

persist: true

})

其他配置，看官網(wǎng)文檔即可

柚子快報邀請碼778899分享：【前端框架】Vue3合集

http://yzkb.51969.com/

相關(guān)鏈接