一網打盡──Vue3 Composition-api新特性
寫在前面
在體驗Vue3之前，我們先來了解一下Vu3到底有哪些亮點之處。
總共有6大特點：
- Performance(性能比vue2的runtime快2倍左右)
- Tree shaking support(按需打包模塊)
- Better TypeScript support(更好的TS代碼支持)
- Composition API(組合API)
- Custom Renderer API(自定義渲染API)
- Fragment, Teleport, Suspense
一、vue3的起源setup
1.理解：vue3.0的組合api舞臺是setup
2.setup所有的數據方法等都配置在setup中
3.setup有兩種返回值:
- 若返回一個對象，則對象中的屬性、方法，在模板中均可直接使用
- 若返回一個渲染函數，則可以自定義渲染內容
4.注意：
- vue3.0盡量不要和vue2的配置混用
- vue2配置(data、methods、computed等)是可以訪問vue3的setup屬性方法
- setup中不可訪問vue2的配置(data、methods、computed等)
- 如果重名，則vue3為準
5.setup不能是一個async函數，因為返回值不再是return的對象，而是promise，模板看不到return對象中的屬性(后期也可以使用suspense和異步組件的配合得到promise)
二、ref函數
作用：用于定義一個響應式數據
語法：const name = ref(initValue)
- 創建一個包含響應式數據的引用對象(reference對象，簡稱ref對象)
- js中操作數據：name.value
- 模板中讀取數據：不需要value，直接<div>{{name}}</div>
注意：
- 接受的數據：基本類型、對象類型
- 基本數據類型：響應式是靠Object.defineProperty()的get與set進行設置和取值操作
- 對象類型的數據：內部使用了vue3中的新函數--reactive函數(其實就是proxy代理)
三、reactive函數
- 作用：用于定義一個對象類型的響應式數據(基本類型不要用它，要用ref函數)
- 語法：const 代理對象(proxy) = reactive(源對象)接收一個對象或數組，返回一個代理對象(proxy的實例對象，簡稱proxy對象)
- reactive定義的響應式是『深層次的』，對象中的所有對象都是響應式的
- 內部基于es6的proxy實現，通過代理對象內部數據進行操作
- 經過reactive處理的對象是不能使用解構語法的，因為會失去響應式特性，可以使用toRefs將reactive每個屬性都轉成ref響應式，這樣就可以進行響應式處理。
ref和reactive的差異
reactive就是用于將對象數據轉為響應式，與vue2的observable類似，而ref用于獲得單獨或為基礎數據類型轉為響應式。
為什么在vue3中會有兩個將數據轉為響應式數據的api，我們來進行詳細說明：
- ref接受一個內部值并返回一個響應式且可變的ref對象，對象具有指向內部值的單個property.value
- reactive接受一個對象，并返回對象的響應式副本，其將對象中的每個元素都轉為ref對象
簡而言之，reactive可以將對象數據轉為響應式，可以將對象中的每個元素都轉為ref響應式數據;而ref不僅可以將對象數據轉為響應式，還可以處理基礎數據類型(string、boolean等)。
之所以會有此差異，那時因為vue3中的響應式是基于proxy實現的，而對于proxy的target必須是引用數據類型，即存放在堆內存中通過指針進行引用的對象。為什么是代理的引用數據類型，那是因為簡單數據類型每次賦值都是全新的數據，根本無法進行代理，因此難以實現簡單數據類型的響應式。
如果我們想要獲取簡單數據類型的響應式，應該如何做呢?
vue3中也考慮到這點，可以通過ref進行簡單數據類型的響應式處理。ref通過創建內部狀態，將值掛到value上，因此ref生成的對象要通過.value獲取使用。而重寫get/set獲得的監聽，同時對對象的處理也依賴了reactive的實現。
正是如此，ref既可以處理簡單數據類型，又可以將引用數據類型進行響應式處理。在實踐中，我們應該避免將reactive當作vue2的data在頂部將所有變量進行聲明，而是應該結合具體的應用和邏輯進行就近聲明。
- class RefImpl<T> {
- private _value: T
- public readonly __v_isRef = true
- constructor(private _rawValue: T, public readonly _shallow = false) {
- this._value = _shallow ? _rawValue : convert(_rawValue)
- }
- get value() {
- track(toRaw(this), TrackOpTypes.GET, 'value')
- return this._value
- }
- set value(newVal) {
- if (hasChanged(toRaw(newVal), this._rawValue)) {
- this._rawValue = newVal
- this._value = this._shallow ? newVal : convert(newVal)
- trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal)
- }
- }
- }
- ...
- const convert = <T extends unknown>(val: T): T =>
- isObject(val) ? reactive(val) : val
- ...
四、Vue3中的響應式原理
vue2的響應式原理：
- 對象類型：通過Object.defineProperty()對屬性的讀取、修改進行攔截(數據劫持)
- 數組類型：通過重寫更新數組的一系列方法來實現攔截。(對數組的變更方法進行包裹)
- Object.defineProperty(data,"count",{
- get(){},
- set(){}
- })
存在問題：
- 新增屬性、刪除屬性，界面不會同步更新
- 直接通過下表修改數組，界面不會自動更新
vue3的響應式原理
- 通過proxy代理：攔截對象中任意屬性的變化，包括：屬性值的讀寫、屬性值的添加、刪除等
- 通過reflect反射：對被代理對象的屬性進行操作
五、reactive和ref的差異
定義數據
- ref：用于定義基本數據類型
- reactive：用于定義引用數據類型
- 注意：ref也可以用于定義引用數據類型，內部會自動通過ractive轉為代理對象
原理
- ref：通過Object.defineProperty()的set和get屬性實現響應式(數據劫持)
- reactive：通過Proxy來實現響應式(數據劫持)，并通過Reflect操作愿對象內部的數據
使用
- ref：ref定義的數據需要通過.value進行操作，模板讀取數據時不需要使用.value
- reactive：reactive定義的數據無需.value，即可進行設置和讀取
六、計算屬性和監視
與vue2中的computed配置功能一致
寫法：
- import {computed} from "vue";
- setup(){
- const sum = computed(()=>{
- return num1 + num2;
- })
- }
- import {computed,reactive} from "vue"
- setup(){
- const person = reactive({
- firstName:"wen",
- lastName:"bo"
- })
- //簡寫
- let fullName = computed(()=>{
- return person.firstName + "-" + person.lastName;
- });
- //完整
- let fullName = computed(()=>{
- get(){
- return person.firstName + "-" + person.lastName;
- },
- set(value){
- const newArr = value.split("-");
- person.firstName = nameArr[0];
- person.lastName = nameArr[1];
- }
- })
- }
七、watch函數
與vue2中的watch配置功能一致
注意：
- 監視reactive定義的響應式數據時，oldValue無法正確獲取，強制開啟了深度監視(deep配置失敗)
- 監視reactive定義的響應式數據中某個屬性時，deep配置有效
- let person = reactive({
- name:"wenbo",
- age:18,
- job:{
- job1:{
- salary:20
- }
- }
- })
- // 情況一：監視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定義的響應式數據，則強制開啟了深度監視
- 此時的deep不生效
- */
- watch(person,(newValue,oldValue)=>{
- console.log("perosn變了",newValue,oldValue);
- },{immediate:true,deep:false})
- //情況四：監視reactive所定義的一個響應式數據中的某個屬性
- watch(()=>person.age,(newValue,oldValue)=>{
- console.log("person的age變化了",newValue,oldValue)
- })
- //情況五：監視reactive所定義的一個響應式數據中的某些屬性
- watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
- console.log("person的name或age變化了",newValue,oldValue)
- })
- //特殊情況-監聽的對象的屬性還是個對象，此時deep生效，可以進行深度監聽
- watch(()=>person.job,(newValue,oldValue)=>{
- console.log("person的job變化了",newValue,oldValue)
- },{deep:true})
注意：
watch監聽reactive定義的對象有五種情況
watch監聽ref定義的響應式數據有兩種情況：
- ref定義的是基本類型數據，此時不能對.value進行監聽。如const num = ref(0)，此時對num.value監聽的話相當于直接對num的值(0)進行監聽了，想想0有啥變化的。
- ref定義的是對象數據類型，此時ref處理后的數據是ref實例的。要監聽對象的變化，需要對對象的.value進行監聽，因為ref對象.value是借助reactive處理的響應式數據proxy。
八、watchEffect函數
watch的套路：既要指明監視的屬性，又要指明監視的回調
watchEffect的套路：不用指明監視的哪個屬性，監視的回調中用到哪個屬性，就監視哪個屬性
watchEffect有點類似computed：
- computed注重的是計算的值，即回調函數的返回值，所以必須要寫返回值
- watchEffect注重的是計算的過程，即回調函數的函數題，所以不用寫返回值
- let person = reactive({
- name:"wenbo",
- age:18,
- job:{
- job1:{
- salary:20
- }
- }
- })
- // warchEffect所指定的回調中用到的數據只要發生變化，則直接重新執行回調
- watchEffect(()=>{
- const x = person.name
- const y = person.job.job1.salary
- console.log("watchEffect觸發了")
- })
九、自定義hooks函數
- hook函數：本質上是一個函數，把setup函數中是用的組合api進行封裝
- 類似于vue2中mixins
- 優點：復用代碼、使得setup中的邏輯更清晰易懂
- <div>pageX：{{point.pageX}}，pageY：{{point.pageY}}<div>
hooks文件 usePoint.js
- import {reactive} from "vue"
- const handleClickPoint = ()=>{
- //實現鼠標“打點”相關數據
- let point = reactive({
- pageX:0,
- pagey:0
- })
- //實現鼠標“打點”相關方法
- const handlePoint = (event)=>{
- point.pageX = event.pageX;
- point.pageY = event.pageY;
- console.log(event.pageX,event.pageY)
- }
- //實現鼠標打點的相關周期函數
- onMounted(()=>{
- window.addEventListener("click",handlePoint)
- })
- onBeforeUnmounted(()=>{
- window.removeEventListener("click",handlePoint)
- })
- }
十、toRef函數
- 經過ref、reactive處理的對象不能直接使用解構進行處理，否則就會失去響應式特性
- 作用：創建一個ref對象，其value值指向另一個對象中的某個屬性
- 語法：const name = toRef(person,"name")
- 應用：要將響應式對象中的某個屬性單獨提供給外部使用時
- 擴展：toRefs與toRef功能一致，但是可以批量創建多個ref對象，語法：toRefs(person)
十一、VUE3生命周期
其它組合式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="str"/>
- <h1>當前的值：{{str}}</h1>
- </template>
- <script>
- import {ref, customRef} from "vue";
- export default {
- setup(){
- // 自定義一個ref：myRef
- const myRef = (value)=>{
- return customRef((track,trigger)=>{
- return{
- get(){
- console.log(`有人從myRef中讀取了此數據${value}`);
- track();
- return value;
- },
- set(newValue){
- console.log(`有人把myRef的數據改為了新數據${newValue}`);
- value = newValue;
- trigger();//通知vue去重新解析模板
- }
- }
- });
- }
- const str = myRef("hello");
- return{
- str
- }
- }
- }
- </script>
5. provide與inject
- 作用：實現祖孫組件間的通信
- 應用場景：父組件有一個provide選項提供數據，子組件有一個inject來獲取使用數據
6. 響應式數據的判斷
- isRef：檢查一個值是否為ref對象
- isReactive：檢查一個值是否為reactive創建的響應式代理
- isReadonly：檢查一個對象是否是由readonly創建的只讀代理
- isProxy：檢查一個對象是否是由reactive或readonly創建的代理
vue3中使用hook注意點
hook中存在異步問題
其實在使用中可以發現，其實hook本質上就是進行抽取的函數，靈活性比較高，但是在涉及到異步邏輯時考慮不周全就會導致很多問題。hook是可以覆蓋異步情況的，但是必HTML須在setup當中執行時返回有效對象不能被阻塞。
通常異步具有兩種風格：
外部沒有其它依賴，只是交付渲染的響應變量。對于此種情況，可以通過聲明、對外暴露響應變量，在hook中使用異步修改的方式。
外部具有依賴，需要在使用側進行加工。對于此種情形，可以通過對外暴露Promise的方式，使得外部獲取到同步操作的能力。
this的問題
由于setup處于生命周期的beforeCreate和created階段之間，因此不能獲取到this。當然我們可以通過setup的第二個參數context獲取到類似與this的部分能力，但是對于想操作路由、vuex等能力則受到了限制，為此最新的router@4、vuex@4都提供了組合式的api。
由于vue2底層限制使得無法使用這些hook，為此可以通過引用實例的方式獲取一定的操作能力，也可以通過getCurrentInstance獲得組件實例上掛載的對象。
雖然組合式api的響應式原理是通過Object.defineProperty改寫屬性的，與vue的響應式原理相同，但是在具體實現方式上存在差異，因此在setup中與vue原生的響應式并不互通。正因此，導致即使拿到相應的實例也沒有辦法監聽它們的響應式，只能通過在選項配置進行使用。
vue3中常見的組件
1. Fragment組件
在vue2中：組件必須有一個根標簽
在vue3中：組件可以沒有根標簽，內部會將多個標簽包裹在Fragment虛擬元素中
好處：減少標簽層級，減少內存占用
2. Teleport
Teleport時倚重能夠將組件html結構移動到指定位置的技術
語法：
main.vue
- <div name="modal"></div>
- <Modal :isOpen="isOpen" @closeModal="closeModal"/>
- <button @click="openModal" >open modal</button>
modal.vue
- <teleport to='#modal'>
- <div class="modal-box" v-if="isOpen">
- <slot>this is a modal</slot>
- <button @click="handleCloseModal">close</button>
- </div>
- </teleport>
3. suspense
等待異步組件時渲染一些額外內容，讓應用有更好的用戶體驗。
使用步驟：
- 異步引入組件
- 使用suspense包裹組件，并配置好default與fallback。
- import {defineAsyncComponent} from "vue"
- const child =defineAsyncComponent(()=>import("./components/child.vue"))
【編輯推薦】
