vue2是目前的主流版本，vue3是未來的趨勢(shì)

vue3帶來了什么

新的特性

創(chuàng)建vue3的工程（1）

構(gòu)建工具

vite與webpack對(duì)比

創(chuàng)建vue3的工程（2）

vue3與vue2 main.js對(duì)比

image.png

CompositionAPI

image.png

setup初始

setup

vue3支持vue2中定義對(duì)象，函數(shù)等方法，但是不推薦使用，如果vue3中也有同名屬性或者方法的時(shí)候，以vue3為主。

ref的使用

image.png

ref的使用-響應(yīng)式數(shù)據(jù)定義

理論分析，實(shí)際情況并非如此

基本數(shù)據(jù)類型是使用的object.defaultProperty的數(shù)據(jù)劫持的方法
處理對(duì)象使用的是es6中更加高端的對(duì)象proxy

ref

reactive函數(shù)

reactive.png

把源對(duì)象通過reactive加工成代理對(duì)象，目的是為了把數(shù)據(jù)做成響應(yīng)式。

響應(yīng)式原理

vue2響應(yīng)式原理.png

vue3響應(yīng)式原理

Object.defineProperty(數(shù)據(jù)源，屬性，{get(),set()})
Reflect.defineProperty(數(shù)據(jù)源，屬性，{get(),set()}) // 反射
都可以實(shí)現(xiàn)對(duì)象代理，但是使用Reflect 代碼框架更加健壯。

vue3的響應(yīng)式原理

reactive與ref對(duì)比

setup傳參

7、計(jì)算屬性與監(jiān)視

難點(diǎn)（需要多刷幾次視頻）：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=152

計(jì)算屬性

監(jiān)聽

image.png

總結(jié)

為什么ref定義的普通數(shù)據(jù)類型監(jiān)視不用value，監(jiān)視對(duì)象需要

watcheffect函數(shù)

總結(jié).png

vue2與vue3生命周期鉤子函數(shù)對(duì)比

image.png

組合api形式的鉤子 比用配置項(xiàng)寫的生命周期鉤子執(zhí)行時(shí)機(jī)更早。

自定義hook函數(shù)

總結(jié)

方法實(shí)現(xiàn)一

方法實(shí)現(xiàn)二，使用hook（一）

方法實(shí)現(xiàn)二，使用hook（二）

toRef

image.png

其他組合api（composition api）

image.png

image.png

頁面數(shù)據(jù)不修改的情況：
1、本來數(shù)據(jù)就沒有改變
2、數(shù)據(jù)修改了，但是vue檢測(cè)不到，不是相應(yīng)式數(shù)據(jù)，所以頁面不修改！

image.png

image.png

image.png

customref 自定義ref

函數(shù)的調(diào)用，可以寫在函數(shù)定義之前！

customref.png

provide與inject

image.png

響應(yīng)式數(shù)據(jù)的判斷

響應(yīng)式數(shù)據(jù)的判斷

Composition API的優(yōu)勢(shì)

image.png

傳統(tǒng)options api存在的問題

使用傳統(tǒng)optionsAPI中，新增或修改一個(gè)需求，就需要分別在data，methods，computed等配置項(xiàng)中修改。

compositionAPI的優(yōu)勢(shì)

我們可以更加優(yōu)雅的組織我們的代碼，函數(shù)，讓相關(guān)功能的代碼更加有序的組織在一起。（使用hook函數(shù)，可以更好的編寫代碼，把功能封裝到一起，使用use調(diào)用即可?。?/p>

vue3中常用的新組件

fragment

teleport

相對(duì)于參數(shù)to做渲染,不用在組件的層級(jí)中操作
彈窗遮罩的實(shí)現(xiàn)，先是div做遮罩層，里面div展示數(shù)據(jù)，
position:absolute;
top:0,bottom:0,left:0;right:0;
background-color: rgba(0,0,0,0.5)
---div樣式
position:absolute;
top:50%; // 相對(duì)整個(gè)父組件
left:50%;
transform：translate(-50%,-50%) // 相對(duì)盒子大小偏移

suspense

靜態(tài)引入與異步引入

image.png

suspense.png

其他

1、全局API的轉(zhuǎn)移

image.png

image.png

2、其他改變

1、data必須使用方法
2、過渡類名的修改
3、移除keycode（因?yàn)榧嫒菪圆缓茫?br> 4、移除native修飾符，使用申明區(qū)別是否為自定義事件，申明就是自定義，不申明就是原生事件
5、移除過濾器

image.png

image.png

為什么data由原來的對(duì)象改寫為方法？
防止組件被復(fù)用的時(shí)候，產(chǎn)生數(shù)據(jù)的關(guān)聯(lián)關(guān)系，從而造成干擾。