一.簡介
image.png
2020年9月18日，Vue.js發布3.0版本，代號：One Piece（海賊王）
和vue2相比它的變化有哪些
1.性能的提升
- 打包大小減少41%
- 初次渲染快55%, 更新渲染快133%
- 內存減少54%
2.源碼的升級
- 使用
Proxy代替defineProperty實現響應式 - 重寫
虛擬DOM的實現和Tree-Shaking
3.擁抱TypeScript
- Vue3可以更好的支持TypeScript
4.新的特性
- 1.Composition API（組合API）
-
setup配置 -
ref與reactive -
watch與watchEffect -
provide與inject
-
- 2.新的內置組件
FragmentTeleportSuspense
- 3.Composition API（組合API）
- 新的生命周期鉤子
-
data選項應始終被聲明為一個函數 - 移除
keyCode支持作為v-on的修飾符
二、創建一個Vue項目
1. 使用 vue-cli 創建
## 查看@vue/cli版本，確保@vue/cli版本在4.5.0以上
vue --version
## 安裝或者升級你的@vue/cli
npm install -g @vue/cli
## 創建Vue項目，選擇Vue3
vue create vue_test
## 啟動
cd vue_test
npm run serve
2. 使用 vite 創建
官方文檔 ： https://v3.cn.vuejs.org/guide/installation.html#vite
vite官網 ：https://vitejs.cn/
- 什么是vite？—— 是Vue團隊打造的新一代前端構建工具。
- 優勢如下：
- 開發環境中，無需打包操作，可快速的冷啟動。
- 輕量快速的熱重載（HMR）。
- 真正的按需編譯，不再等待整個應用編譯完成。
-
傳統構建 與 vite構建對比圖
image.png
傳統構建模式，是將所有資源都打包好，再上線
image.png
而Vite有點按需加載的意思在那里了~
接下來我們就用Vite來創建一個Vue3的項目
## 創建工程
npm init vite-app vue3_test_vite
## 進入工程目錄
cd vue3_test_vite
## 安裝依賴
npm install
## 運行
npm run dev
三、分析文件目錄
1.main
Vue2項目的main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Vue3項目的main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
注意: 可以明顯的看到vue3引入的不在是vue構造函數了，引入的是一個名為createApp的工廠函數
將代碼處理一下把在看看
//vue2
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
const vm = new Vue({
render: h => h(App),
})
console.log(vm)
// 掛載
vm.$mount('#app')
//vue3
import { createApp } from 'vue'
import App from './App.vue'
// 創建應用實例對象--app(類似于之前Vue2中的vm，但app比vm更‘輕’)
const app = createApp(App)
console.log(app)
// 掛載
app.mount('#app')
vue3和vue2的一個小區別
分別打印vm 和 app 進行對比 可以很明顯看到vue3的屬性比vue2少很多
image.png
image.png
2.App.vue
在 template 標簽里可以沒有根標簽了
<template>
<!-- Vue3組件中的模板結構可以沒有根標簽 -->
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
接下來我們來正式學習Vue3的內容~
四、Composition API(組合式api)
官方文檔: https://v3.cn.vuejs.org/guide/composition-api-introduction.html
1.拉開序幕的setup
- 理解：Vue3.0中一個新的配置項，值為一個函數。
- setup是所有
Composition API（組合API）“ 表演的舞臺 ” 。 - 組件中所用到的：
數據、方法等等，均要配置在setup中。 - setup函數的兩種返回值：
- 若返回一個對象，則對象中的屬性、方法, 在模板中均可以直接使用。（重點關注！）
- 若返回一個渲染函數：則可以自定義渲染內容。（了解）
- 注意點：
- 盡量不要與Vue2.x配置混用
- Vue2.x配置（data、methos、computed...）中可以訪問到setup中的屬性、方法。
- 但在setup中不能訪問到Vue2.x配置（data、methos、computed...）。
- 如果有重名, setup優先。
- setup不能是一個async函數，因為返回值不再是return的對象, 而是promise, 模板看不到return對象中的屬性。（后期也可以返回一個Promise實例，但需要Suspense和異步組件的配合）
- 盡量不要與Vue2.x配置混用
案例
<template>
<h1>個人信息</h1>
<h2>姓名：{{name}}</h2>
<h2>年齡：{{age}}</h2>
<h2>性別：{{gender}}</h2>
<button @click="sayInfo">顯示信息</button>
</template>
<script>
// import {h} from 'vue'
export default {
name: "App",
//此處只是測試一下setup，暫時不考慮響應式的問題。
setup(){
// 數據
let name = "EvenShun"
let age = 22
let gender = "男"
// 方法
function sayInfo(){
alert(`我是${name},年齡${age },性別${gender}`)
}
return {
name,
age,
gender,
sayInfo
}
// return ()=> h('h1','EvenShun')
}
};
</script>
2.ref函數
- 作用: 定義一個響應式的數據
- 語法:
const xxx = ref(initValue)- 創建一個包含響應式數據的
引用對象（reference對象，簡稱ref對象）。 - JS中操作數據：
xxx.value - 模板中讀取數據: 不需要.value，直接：
<div>{{xxx}}</div>
- 創建一個包含響應式數據的
- 備注：
- 接收的數據可以是：基本類型、也可以是對象類型。
- 基本類型的數據：響應式依然是靠
Object.defineProperty()的get與set完成的。 - 對象類型的數據：內部 “ 求助 ” 了Vue3.0中的一個新函數——
reactive函數。
案例
<template>
<h1>一個人的信息</h1>
<h2>姓名：{{name}}</h2>
<h2>年齡：{{age}}</h2>
<h3>工作種類：{{job.type}}</h3>
<h3>工作薪水：{{job.salary}}</h3>
<button @click="changeInfo">修改人的信息</button>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup(){
//數據
let name = ref('張三')
let age = ref(18)
let job = ref({
type:'前端工程師',
salary:'30K'
})
//方法
function changeInfo(){
// name.value = '李四'
// age.value = 48
console.log(job.value)
// job.value.type = 'UI設計師'
// job.value.salary = '60K'
// console.log(name,age)
}
//返回一個對象（常用）
return {
name,
age,
job,
changeInfo
}
}
}
</script>
3.reactive函數
- 作用: 定義一個對象類型的響應式數據（基本類型不要用它，要用
ref函數） - 語法：
const 代理對象= reactive(源對象)接收一個對象（或數組），返回一個代理對象（Proxy的實例對象，簡稱proxy對象） -
reactive定義的響應式數據是“深層次的”。 - 內部基于
ES6的Proxy實現，通過代理對象操作源對象內部數據進行操作。
案例
<template>
<h1>一個人的信息</h1>
<h2>姓名：{{person.name}}</h2>
<h2>年齡：{{person.age}}</h2>
<h3>工作種類：{{person.job.type}}</h3>
<h3>工作薪水：{{person.job.salary}}</h3>
<h3>愛好：{{person.hobby}}</h3>
<h3>測試的數據c：{{person.job.a.b.c}}</h3>
<button @click="changeInfo">修改人的信息</button>
</template>
<script>
import {reactive} from 'vue'
export default {
name: 'App',
setup(){
//數據
let person = reactive({
name:'張三',
age:18,
job:{
type:'前端工程師',
salary:'30K',
a:{
b:{
c:666
}
}
},
hobby:['抽煙','喝酒','燙頭']
})
//方法
function changeInfo(){
person.name = '李四'
person.age = 48
person.job.type = 'UI設計師'
person.job.salary = '60K'
person.job.a.b.c = 999
person.hobby[0] = '學習'
}
//返回一個對象（常用）
return {
person,
changeInfo
}
}
}
</script>
4.Vue3.0中的響應式原理
vue2.x的響應式
-
實現原理：
對象類型：通過
Object.defineProperty()對屬性的讀取、修改進行攔截（數據劫持）。數組類型：通過重寫更新數組的一系列方法來實現攔截。（對數組的變更方法進行了包裹）。
Object.defineProperty(data, 'count', { get () {}, set () {} }) -
存在問題：
- 新增屬性、刪除屬性, 界面不會更新。
- 直接通過下標修改數組, 界面不會自動更新。
案例 模擬Vue2中實現響應式
//源數據
let person = {
name:'張三',
age:18
}
//模擬Vue2中實現響應式
let p = {}
Object.defineProperty(p,'name',{
configurable:true,
get(){ //有人讀取name時調用
return person.name
},
set(value){ //有人修改name時調用
console.log('有人修改了name屬性，我發現了，我要去更新界面！')
person.name = value
}
})
Object.defineProperty(p,'age',{
get(){ //有人讀取age時調用
return person.age
},
set(value){ //有人修改age時調用
console.log('有人修改了age屬性，我發現了，我要去更新界面！')
person.age = value
}
})
Vue3.0的響應式
-
實現原理:
- 通過
Proxy（代理）: 攔截對象中任意屬性的變化, 包括：屬性值的讀寫、屬性的添加、屬性的刪除等。 - 通過
Reflect（反射）: 對源對象的屬性進行操作。 - MDN文檔中描述的
Proxy與Reflect：
- 通過
-
模擬Vue3中實現響應式
const p = new Proxy(person, { //有人讀取p的某個屬性時調用 get(target, propName) { console.log(`有人讀取了p身上的${propName}屬性`) return Reflect.get(target, propName) }, //有人修改p的某個屬性、或給p追加某個屬性時調用 set(target, propName, value) { console.log(`有人修改了p身上的${propName}屬性，我要去更新界面了！`) Reflect.set(target, propName, value) }, //有人刪除p的某個屬性時調用 deleteProperty(target, propName) { console.log(`有人刪除了p身上的${propName}屬性，我要去更新界面了！`) return Reflect.deleteProperty(target, propName) } })
5.reactive對比ref
- 從定義數據角度對比：
- ref用來定義：基本類型數據。
- reactive用來定義：對象（或數組）類型數據。
- 備注：ref也可以用來定義 對象（或數組）類型數據, 它內部會自動通過
reactive轉為代理對象。
- 從原理角度對比：
- ref通過
Object.defineProperty()的get與set來實現響應式（數據劫持）。 - reactive通過使用
Proxy來實現響應式（數據劫持）, 并通過Reflect操作源對象內部的數據。
- ref通過
- 從使用角度對比：
- ref定義的數據：操作數據 需要
.value，讀取數據時模板中直接讀取 **不需要
**.value。 - reactive定義的數據：操作數據與讀取數據：均不需要
.value。
- ref定義的數據：操作數據 需要
6.setup的兩個注意點
-
setup執行的時機
- 在beforeCreate之前執行一次，this是undefined。
-
setup的參數
- props：值為對象，包含：組件外部傳遞過來，且組件內部聲明接收了的屬性。
- context：上下文對象
- attrs: 值為對象，包含：組件外部傳遞過來，但沒有在props配置中聲明的屬性, 相當于
this.$attrs。 - slots: 收到的插槽內容, 相當于
this.$slots。 - emit: 分發自定義事件的函數, 相當于
this.$emit。
- attrs: 值為對象，包含：組件外部傳遞過來，但沒有在props配置中聲明的屬性, 相當于
7.計算屬性與監視
1.computed函數
與Vue2.x中computed配置功能一致
-
寫法
import {computed} from 'vue' setup(){ ... //計算屬性——簡寫 let fullName = computed(()=>{ return person.firstName + '-' + person.lastName }) //計算屬性——完整 let fullName = computed({ get(){ return person.firstName + '-' + person.lastName }, set(value){ const nameArr = value.split('-') person.firstName = nameArr[0] person.lastName = nameArr[1] } }) }
2.watch函數
與Vue2.x中watch配置功能一致
-
兩個小“坑”：
- 監視reactive定義的響應式數據時：oldValue無法正確獲取、強制開啟了深度監視（deep配置失效）。
- 監視reactive定義的響應式數據中某個屬性時：deep配置有效。
//情況一：監視ref定義的響應式數據 watch(sum,(newValue,oldValue)=>{ console.log('sum變化了',newValue,oldValue) },{immediate:true}) //情況二：監視多個ref定義的響應式數據 watch([sum,msg],(newValue,oldValue)=>{ console.log('sum或msg變化了',newValue,oldValue) }) /* 情況三：監視reactive定義的響應式數據 若watch監視的是reactive定義的響應式數據，則無法正確獲得oldValue！！ 若watch監視的是reactive定義的響應式數據，則強制開啟了深度監視 */ watch(person,(newValue,oldValue)=>{ console.log('person變化了',newValue,oldValue) },{immediate:true,deep:false}) //此處的deep配置不再奏效 //情況四：監視reactive定義的響應式數據中的某個屬性 watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job變化了',newValue,oldValue) },{immediate:true,deep:true}) //情況五：監視reactive定義的響應式數據中的某些屬性 watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{ console.log('person的job變化了',newValue,oldValue) },{immediate:true,deep:true}) //特殊情況 watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job變化了',newValue,oldValue) },{deep:true}) //此處由于監視的是reactive素定義的對象中的某個屬性，所以deep配置有效 watch監視ref數據的說明
如果監聽的是ref(基本數據類型) watch第一個參數直接傳要監聽的名
監聽的是ref(引用數據類型) 需要開啟deep為true
//數據
let sum = ref(0)
let msg = ref('你好啊')
let person = ref({
name:'張三',
age:18,
job:{
j1:{
salary:20
}
}
})
console.log(person)
watch(sum,(newValue,oldValue)=>{
console.log('sum的值變化了',newValue,oldValue)
})
watch(person,(newValue,oldValue)=>{
console.log('person的值變化了',newValue,oldValue)
},{deep:true})
3.watchEffect函數
watch的套路是：既要指明監視的屬性，也要指明監視的回調。
watchEffect的套路是：不用指明監視哪個屬性，監視的回調中用到哪個屬性，那就監視哪個屬性。
-
watchEffect有點像computed：
- 但computed注重的計算出來的值（回調函數的返回值），所以必須要寫返回值。
- 而watchEffect更注重的是過程（回調函數的函數體），所以不用寫返回值。
//watchEffect所指定的回調中用到的數據只要發生變化，則直接重新執行回調。 watchEffect(()=>{ const x1 = sum.value const x2 = person.age console.log('watchEffect配置的回調執行了') })
8.生命周期
-
vue2.x的生命周期
image.png -
vue3.0的生命周期
image.png -
Vue3.0中可以繼續使用Vue2.x中的生命周期鉤子，但有有兩個被更名：
-
beforeDestroy改名為beforeUnmount -
destroyed改名為unmounted
-
-
Vue3.0也提供了 Composition API 形式的生命周期鉤子，與Vue2.x中鉤子對應關系如下：
-
beforeCreate===>setup() -
created=======>setup() -
beforeMount===>onBeforeMount -
mounted=======>onMounted -
beforeUpdate===>onBeforeUpdate -
updated=======>onUpdated -
beforeUnmount==>onBeforeUnmount -
unmounted=====>onUnmounted
-
示例
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
name: 'Demo',
setup(){
console.log('---setup---')
//數據
let sum = ref(0)
//通過組合式API的形式去使用生命周期鉤子
onBeforeMount(()=>{
console.log('---onBeforeMount---')
})
onMounted(()=>{
console.log('---onMounted---')
})
onBeforeUpdate(()=>{
console.log('---onBeforeUpdate---')
})
onUpdated(()=>{
console.log('---onUpdated---')
})
onBeforeUnmount(()=>{
console.log('---onBeforeUnmount---')
})
onUnmounted(()=>{
console.log('---onUnmounted---')
})
//返回一個對象（常用）
return {sum}
},
}
9.自定義hook函數
什么是hook？—— 本質是一個函數，把setup函數中使用的Composition API進行了封裝。
類似于vue2.x中的mixin。
自定義hook的優勢: 復用代碼, 讓setup中的邏輯更清楚易懂。
示例
創建一個hooks文件夾，里面創建文件usePoint.js
import { reactive, onMounted, onBeforeUnmount } from "vue";
export default function() {
//實現鼠標“打點”相關的數據
let point = reactive({
x: 0,
y: 0,
});
//實現鼠標“打點”相關的方法
function savePoint(event) {
point.x = event.pageX;
point.y = event.pageY;
console.log(event.pageX, event.pageY);
}
//實現鼠標“打點”相關的生命周期鉤子
onMounted(() => {
window.addEventListener("click", savePoint);
});
onBeforeUnmount(() => {
window.removeEventListener("click", savePoint);
});
return point;
}
在組件里使用
<template>
<h2>我是HelloWorld組件</h2>
<h2>當前點擊時鼠標的坐標為：x：{{point.x}}，y：{{point.y}}</h2>
</template>
<script>
import usePoint from '../hooks/usePoint'
export default {
name:'HelloWorld',
setup(){
const point = usePoint()
return {point}
}
}
</script>
10.toRef
- 作用：創建一個 ref 對象，其value值指向另一個對象中的某個屬性。
- 語法：
const name = toRef(person,'name') - 應用: 要將響應式對象中的某個屬性單獨提供給外部使用時。
擴展：
toRefs與toRef功能一致，但可以批量創建多個 ref 對象，語法：toRefs(person)示例
<template>
<h4>{{person}}</h4>
<h2>姓名：{{name}}</h2>
<h2>年齡：{{age}}</h2>
<h2>薪資：{{job.j1.salary}}K</h2>
<button @click="name+='~'">修改姓名</button>
<button @click="age++">增長年齡</button>
<button @click="job.j1.salary++">漲薪</button>
</template>
<script>
import {ref,reactive,toRef,toRefs} from 'vue'
export default {
name: 'Demo',
setup(){
//數據
let person = reactive({
name:'張三',
age:18,
job:{
j1:{
salary:20
}
}
})
// const name1 = person.name
// console.log('%%%',name1)
// const name2 = toRef(person,'name')
// console.log('####',name2)
const x = toRefs(person)
console.log('******',x)
return {
person,
// name:toRef(person,'name'),
// age:toRef(person,'age'),
// salary:toRef(person.job.j1,'salary'),
...toRefs(person)
}
}
}
</script>
三、其它 Composition API
1.shallowReactive 與 shallowRef
shallowReactive：只處理對象最外層屬性的響應式（淺響應式）。
shallowRef：只處理基本數據類型的響應式, 不進行對象的響應式處理。
-
什么時候使用?
- 如果有一個對象數據，結構比較深, 但變化時只是外層屬性變化 ===> shallowReactive。
- 如果有一個對象數據，后續功能不會修改該對象中的屬性，而是生新的對象來替換 ===> shallowRef。
2.readonly 與 shallowReadonly
- readonly: 讓一個響應式數據變為只讀的（深只讀）。
- shallowReadonly：讓一個響應式數據變為只讀的（淺只讀）。
- 應用場景: 不希望數據被修改時。
3.toRaw 與 markRaw
- toRaw：
- 作用：將一個由
reactive生成的 響應式對象轉為普通對象。 - 使用場景：用于讀取響應式對象對應的普通對象，對這個普通對象的所有操作，不會引起頁面更新。
- 作用：將一個由
- markRaw：
- 作用：標記一個對象，使其永遠不會再成為響應式對象。
- 應用場景:
- 有些值不應被設置為響應式的，例如復雜的第三方類庫等。
- 當渲染具有不可變數據源的大列表時，跳過響應式轉換可以提高性能。
4.customRef
作用：創建一個自定義的 ref，并對其依賴項跟蹤和更新觸發進行顯式控制。
-
實現防抖效果：
<template> <input type="text" v-model="keyword"> <h3>{{keyword}}</h3> </template> <script> import {ref,customRef} from 'vue' export default { name:'Demo', setup(){ // let keyword = ref('hello') //使用Vue準備好的內置ref //自定義一個myRef function myRef(value,delay){ let timer //通過customRef去實現自定義 return customRef((track,trigger)=>{ return{ get(){ track() //告訴Vue這個value值是需要被“追蹤”的 return value }, set(newValue){ clearTimeout(timer) timer = setTimeout(()=>{ value = newValue trigger() //告訴Vue去更新界面 },delay) } } }) } let keyword = myRef('hello',500) //使用程序員自定義的ref return { keyword } } } </script>
5.provide 與 inject
image.png
作用：實現 祖與后代組件間 通信
套路：父組件有一個
provide選項來提供數據，后代組件有一個inject選項來開始使用這些數據-
具體寫法：
-
祖組件中：
setup(){ ...... let car = reactive({name:'奔馳',price:'40萬'}) provide('car',car) ...... } -
后代組件中：
setup(props,context){ ...... const car = inject('car') return {car} ...... }
-
6.響應式數據的判斷
- isRef: 檢查一個值是否為一個 ref 對象
- isReactive: 檢查一個對象是否是由
reactive創建的響應式代理 - isReadonly: 檢查一個對象是否是由
readonly創建的只讀代理 - isProxy: 檢查一個對象是否是由
reactive或者readonly方法創建的代理
四、Composition API 的優勢
1.Options API 存在的問題
使用傳統OptionsAPI中，新增或者修改一個需求，就需要分別在data，methods，computed里修改 。
image.png
2.Composition API 的優勢
我們可以更加優雅的組織我們的代碼，函數。讓相關功能的代碼更加有序的組織在一起。
image.png
五、新的組件
1.Fragment
- 在Vue2中: 組件必須有一個根標簽
- 在Vue3中: 組件可以沒有根標簽, 內部會將多個標簽包含在一個Fragment虛擬元素中
- 好處: 減少標簽層級, 減小內存占用
2.Teleport
-
什么是Teleport？——
Teleport是一種能夠將我們的組件html結構移動到指定位置的技術。<teleport to="移動位置"> <div v-if="isShow" class="mask"> <div class="dialog"> <h3>我是一個彈窗</h3> <button @click="isShow = false">關閉彈窗</button> </div> </div> </teleport>
3.Suspense
等待異步組件時渲染一些額外內容，讓應用有更好的用戶體驗
-
使用步驟：
-
異步引入組件
import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components/Child.vue')) -
使用
Suspense包裹組件，并配置好default與fallback<template> <div class="app"> <h3>我是App組件</h3> <Suspense> <template v-slot:default> <Child/> </template> <template v-slot:fallback> <h3>加載中.....</h3> </template> </Suspense> </div> </template>
-
六、其他
1.全局API的轉移
-
Vue 2.x 有許多全局 API 和配置。
-
例如：注冊全局組件、注冊全局指令等。
//注冊全局組件 Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>' }) //注冊全局指令 Vue.directive('focus', { inserted: el => el.focus() }
-
-
Vue3.0中對這些API做出了調整：
-
將全局的API，即：
Vue.xxx調整到應用實例（app）上2.x 全局 API（ Vue）3.x 實例 API ( app)Vue.config.xxxx app.config.xxxx Vue.config.productionTip 移除Vue.component app.component Vue.directive app.directive Vue.mixin app.mixin Vue.use app.use Vue.prototype app.config.globalProperties
-
2.其他改變
data選項應始終被聲明為一個函數。
-
過度類名的更改：
-
Vue2.x寫法
.v-enter, .v-leave-to { opacity: 0; } .v-leave, .v-enter-to { opacity: 1; } -
Vue3.x寫法
.v-enter-from, .v-leave-to { opacity: 0; } .v-leave-from, .v-enter-to { opacity: 1; }
-
移除 keyCode作為 v-on 的修飾符，同時也不再支持
config.keyCodes-
移除
v-on.native修飾符-
父組件中綁定事件
<my-component v-on:close="handleComponentEvent" v-on:click="handleNativeClickEvent" /> -
子組件中聲明自定義事件
<script> export default { emits: ['close'] } </script>
-
-
移除 過濾器（filter）
過濾器雖然這看起來很方便，但它需要一個自定義語法，打破大括號內表達式是 “只是 JavaScript” 的假設，這不僅有學習成本，而且有實現成本！建議用方法調用或計算屬性去替換過濾器。
......
