Vue3

編碼規范

創建vue3工程

基于vite創建

快速上手 | Vue.js (vuejs.org)

npm create vue@latest

在nodejs環境下運行進行創建

按提示進行創建

用vscode打開項目

安裝依賴

源文件有src

內有main.ts? App.vue

簡單分析

編寫src

vue2語法在三中適用

vue2中的date? methods語法是

選項式API

setup

setup函數執行的時機

setup執行時機比vue2中的beforecreate還要早

setup函數中的this是undefined? ? ? vue3中已經開始弱化this

數據原來是寫在data中的 ，此時的name、age、tel都不是響應式數據

即，通過下面的方法修改變量，? 變量雖然改變，但頁面沒有變化

setup返回值

小小面試題

Vue3中使用setup和使用data? ? ?methods??

setup和optionAPI的關系

data（methods? ? 下文data代指vue2舊寫法）和setup可以同時存在

且? data中可以訪問setup中的數據，通過this關鍵字

舊寫法可以讀取新寫法中的東西

新寫法無法讀取舊寫法中的東西

vue2中選項式語法可以和vue3 中的新語法setup共存

舊語法可以讀出setup中的東西，setup不可以讀出舊語法中的東西

setup語法糖

省去每次將return放出去數據方法的步驟

這個script標簽是用來配置組件名字

這個script標簽用來配置組合式API

此時有兩個script標簽，且兩個標簽的lang屬性一致

此時只需要在setup 的script標簽內隨意寫數據和方法

若想要將這兩個script標簽寫在一個內

需要借助插件完成

安裝插件

1.npm i vite-plugin-vue-setup-extend -D

-D 是開發依賴的意思

2.修改vite.config.ts文件

響應式數據

ref定義基本類型 的數據

想讓哪個數據成為響應式數據，就給那個數據包裹ref（）

模板中不需要.value

js中進行數據操作，需要通過.value調用

name不是響應式的，name.value是響應式的

此時 的 被ref（）包裹的name age為refImpl對象

reactive定義對象類型的數據

被reactive包裹的對象類型數據轉變為響應式對象數據

通過控制臺輸出響應式對象可知，為proxy代理對象（數組）? proxy為原生js就有的，叫做代理

原生內置的函數

reactive所定義的對象類型的響應式數據是深層次的?

ref與reactive

表面上是ref定義對象類型數據改為響應式數據，實際上ref遇見對象數組等非基本數據類型，底層是通過reactive實現的

reactive重新分配一個新對象，會失去響應式

此時要是使用object.assign 替換

也就是說重新上傳一個新對象，不能直接對進行了響應式改變的對象直接更改對象

而是通過object的assign 方法實現對象的覆蓋

ref可以通過.value 直接修改對象

toRefs和toRef

把一個響應式結構中的屬性拿出來并且使其具備響應式

toRefs 將對象內的屬性可以多個同步取出并進行ref響應式

toRef(對象，對象其中的一個屬性名)

toRefs(對象)

toRefs解構對象，toRef解構對象的某個屬性

計算屬性

根據已有數據計算出新數據

input表單中的屬性

v-bind：? ?單向綁定

v-model：雙向綁定

方法沒有緩存

計算屬性有緩存

在多次調用fullName是，如果firstName和LastName未改變，則計算屬性執行一次

slice截取

val.split(‘-’)根據這個字符分開成為一個數組

.toUpperCase()字母大寫的方法

計算屬性最終得到的也是一個ref響應式數據

在對fullName進行修改時? .value 修改 的值會在set方法中返回給val

Watch

3.getter函數

Watch監視-情況一

監視ref定義的 基本類型數據

Watch監視-情況二

若想要監視對象內部屬性的變化，需要手動開啟深度監視

?

如果修改的是對象中的屬性，因為所更改的是舊的對象中的屬性，所以oldvalue為原本的對象，又因為更改后的屬性所對應的還是舊屬性，所以newvalue所對應的也是原本更改了屬性的對象，所以這種寫法下，僅修改屬性值，而不修改整個對象的話，oldvalue和newvalue是相同的

實際使用中通常不使用舊值?

?Watch監視-情況三

如果監視的是reactive所定義的數據，底層隱式地創建了深層的監聽

?Watch監視-情況四

監視的屬性為基本數據類型

getter函數，一個函數返回一個值

監視的屬性為對象數據類型

如果直接寫對象的這個對象類型的屬性，只能監視，這個對象類型數據內部的變化，整體對象的改變無法監視

寫函數式返回 這個對象數據類型的屬性? 返回的是地址值，只有當這個屬性整個對象改變時，才會監視，觸發監視函數

中和方案：采用函數書寫，添加深度監視屬性

?Watch監視-情況五

監視上述多個數據

watchEffect

watch? 監視 多個數據 需要將多個數據指出

watchEffect? ?不用明確指出監視的數據（函數中用到哪些屬性，那就監視哪些屬性）

標簽的ref屬性

用于給節點打標識

如何調用dom標簽，使用id調用難免會出現 倆個vue文件中出現標有相同id的html標簽

所以此時通過ref在? 模版中的html標簽內打上ref標簽，內寫上名字，再在js板塊寫

名字=ref（）即可實現調用dom元素，且不會出現兩個id重復的情況

ref加在html標簽上，得到的是dom元素

加載組件上，得到的是組件的實例對象，但暴露出的數據需要再組件的vue內進行修改

ref寫在組件標簽上，，最終能獲取組件實例

由于具有保護措施，，打印出的組件實例，沒有實質的內容，

此時需要在? ?組件源文件，兒子端，內調用defineExpose設置暴露給父級的東西

scoped局部樣式無腦加

其他vue文件就再也不怕類名起重復了

回顧TS中的_接口_泛型_自定義類型

TS接口規范的使用

@符在文件路徑時使用，指站在金字塔頂端

限制Persons數組時

使用泛型

泛型什么時候用什么時候寫

自定義類型

props的使用

從父級傳數據

reactive直接傳泛型

defineProps? 函數用于接受數據

標簽內傳入數據的值

傳入數據時，在html標簽中遇到的問題? ? ：與否? 決定是表達式還是簡單的字符

vue中的遍歷? ?

數據源中每一項（形參）? ? 數據源

還應添加索引值? ? ?key? ? ?:key可以進行對索引值的 賦值，避免后面遍歷的時候出現問題

沒有key索引值為0-1-2-。。。。。

props的幾種寫法

define為前綴的函數表示該函數為宏函數

不用引入也可以直接使用

生命周期（組件的一生）

Vue2的生命周期

v-if既然不展示，結構給刪了

v-show? ? ? ?結果還在

debugger()

Vue3的生命周期

創建在setup這個中

掛載

掛載前onBeforeMount()

掛載完畢onMounted()

更新

更新前onBeforeUpdate

更新完畢onUpdate()

卸載

卸載前onBeforeUnmount()

卸載完畢onUnmounted()

?最基本八個生命周期

自定義Hooks

Hooks：

mixin

命名：useDog? ?（與狗相關的） useXX? 與XX相關的一部分內容? 被模塊化包裝

Hooks的調用

Hooks本質是一個個可以調用的函數

Hooks內能寫鉤子（生命周期函數）

? ?

組合式API? ? ? ? ? Hooks實現相關內容（數據函數等）模塊化，整合到一起

export default? 后面直接跟值

路由（route）

就是一種對應關系

1.路由就是一組key-value的對應關系

2.多個路由需要經過路由器的管理

spa????????應用? ? 單頁面應用 需要使用路由

路由_基本切換效果

第一步寫出導航區，和展示區

第二步? 請出路由器

制定路由的時候? 一定要想好路由器的工作模式

制定好路由后一定要暴露router

并在main.ts引入router

并使用路由器

此時已經具備路由環境

還應在App。vue文件中添加可視路由模塊

路由_兩個注意點

路由_路由器工作模式

to的兩種寫法

命名路由

路由嵌套

添加子級路由不用填/

路由傳參? query參數

從一個響應式上解構一個屬性，這個屬性丟失響應式

params參數

占位問題

params不能傳對象和數組

params? ? ? ?

不能用path只能用name

路由的props配置

第一種寫法：將路由收到的所有params參數作為props傳給路由組件? ? ? 只能params參數使用

第二種寫法：函數寫法

更加適合query參數，因為params參數用第一種方法更加簡單

第三種寫法：無法進行修改，只有固定數據，使用較少

replace

跳轉的時候有兩種方式

push? 會有歷史記錄，能夠后退

導航區加replace? ? 不能夠后退

給

編程式路由導航

脫離routerLink實現跳轉頁面

router.push()寫法? ? ? ? ? ? ? ? ?routerLink 中?to能寫什么

重定向

作用：將特定的路徑，重新定向到已有路由。

通常寫在路由設置最下面

pinia

vue.js狀態管理庫

自己定義的ref，需要.value拆包

如果是reactive里面包了一個ref，自動拆包，不需要再.value就能獲取值

5.4修改數據的三種方式

第一種：直覺修改

?

工具中可以看到

第二種：patch批量變更

patch批量變更，在時間線上，多個數據單個修改? ? ? 組件會進行多次修改

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 而使用第二種修改方式? ? 組件只會進行一次patch修改

批量變更

第三種：action

storeToRefs

讀取store數據更加優雅

storeToRefs只關心數據不關心其他的

而使用toRefs會使內部所有屬性被ref包裹

getters的使用

對stroe數據不滿意，對其進行修改

如果用this，不能使用箭頭函數

訂閱subscribe可以監視vueX的修改

只要是store? 身上都有這個subscribe方法

、

localStorage.setItem('talkList',state.talkList)//瀏覽器的本地存儲

localStorage里面存的都是字符串，如果存的不是字符串

，底層會調用toString

store組合式寫法

選項式

組合式

組件通信

UomgAPI