前言:vue2中復雜組件的代碼變得越來越難以維護,缺少一種在多個組件之間提取和復用邏輯的機制,現在的重用機制又存在一些弊端,所以vue3中隆重推出了Composition API。
關于Composition API:
一、ref和reactive
1.ref:
作用:用于定義基本類型數據,例如:String,Number,Boolean
等,將其轉換為一個帶有響應式特性的數據類型
語法:const x = ref(100)
訪問:在setup
中使用.value
訪問,在模板中讀取時,不需要使用.value
<script lang="ts" setup>
import { ref} from 'vue'
const count = ref(9)
const increase = () => {
count.value++
}
const decrease = () => {
count.value--
}
</script>
<template>
<div>
<h1> count is a number {{ count }}</h1>
<div>
<button @click="increase">count +1</button>
<button @click="decrease">count -1</button>
</div>
</div>
</template>
2.reactive
作用:用于定義引用數據類型,例如:數組,對象等,將其轉換為一個帶有響應式特性的數據類型
語法:const info = reactive( { count: 0 } )
注意:響應式轉換是深層的,它會影響所有嵌套的屬性;若要避免深層響應式的轉換,只想保留對這個對象頂層次訪問的響應性,請使用ShallowReactive()
<script lang="ts" setup>
import { reactive} from 'vue'
const data = reactive({
count: 5
})
const increase = () => {
data.count++
}
const decrease = () => {
data.count--
}
</script>
<template>
<div class="about">
<h1> count is a number {{ data.count }}</h1>
<div>
<button @click="increase">count +1</button>
<button @click="decrease">count -1</button>
</div>
</div>
</template>
上述示例中,如果將reactive對象中的屬性解構后單獨拿出來使用,則會失去響應性,比如:
const {count} = data
官方推薦我們使用toRefs()
來解構reactive
對象,使其展開的每個屬性都是響應式的;
const {count} = toRefs(data)
二、computed和watch
1.computed
作用:描述依賴響應式狀態的復雜邏輯;會自動追蹤響應式依賴。
用法:computed()
方法接收一個getter
函數作為參數,返回值為一個計算屬性ref
,即可以通過.value
訪問計算結果,在模板表達式中無需添加.value
<script lang="ts" setup>
import { reactive, computed, toRefs } from 'vue'
const data = reactive({
count: 5
})
const { count } = toRefs(data)
const doubleCount = computed(() => {
return count.value * 2
})
const increase = () => {
count.value++
console.log(doubleCount.value)
}
const decrease = () => {
count.value--
console.log(doubleCount.value)
}
</script>
<template>
<div class="about">
<h1>count is a number {{ count }}</h1>
<div>
<button @click="increase">count +1</button>
<button @click="decrease">count -1</button>
</div>
<h1>this is doubleCount{{ doubleCount }}</h1>
</div>
</template>
計算屬性vs方法:
不同點:
計算屬性值會基于其響應式依賴被緩存,即一個計算屬性僅會在其響應式依賴更新時才重新計算;而方法調用總是會在重新渲染發生時再次執行函數。
2.watch
作用:用于監聽響應式變量的變化
語法:watch(x,(new, old) => {})
watch
的第一個參數可以是:一個ref
(包括計算屬性)、一個響應式對象、一個getter
函數、或多個數據源組成的數組
const { count } = ref(3)
const doubleCount = computed(() => {
return count.value * 2
})
watch(doubleCount, (newValue, oldValue) => {
console.log('new', newValue)
console.log('old', oldValue)
})
注意:不能直接偵聽響應式對象的屬性值!!
而是 需要返回該屬性的getter函數:
const data = reactive({
count: 5
})
// 提供一個getter函數
watch(
() => data.count,
(count) => {
console.log('count is', count)
}
)
三、新的生命周期函數
1.選項式的beforeCreate
、created
,被setup
替代了,setup
表示組件被創建之前,props
被解析之后執行,它是組合式API的入口
2.選項式的beforeDestroy
、destroyed
被更名為beforeUnmount
、unmounted
vue 2.x | vue 3.x |
---|---|
beforeCreate | setup |
created | setup |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
四、自定義函數-Hooks函數
新建hooks/useXXX.ts文件,將邏輯代碼都放在函數里:
hooks/useMousePosition.ts
import {ref,onMounted,onUnmounted} from 'vue'
function useMousePosition () {
const x = ref(0)
const y = ref(0)
const updateMouse = (event:MouseEvent) => {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => {
document.addEventListener('click', updateMouse)
})
onUnmounted(() => {
document.removeEventListener('click', updateMouse)
})
return {
x,
y
}
}
export default useMousePosition
xxx.vue
<script setup lang="ts">
import useMousePosition from './hooks/useMousePosition'
const { x, y } = useMousePosition()
</script>
優點:
- 清楚x,y變量來源
- 可以給x,y設置別名,這樣的話可以避免命名沖突的風險
- 邏輯可以脫離組件存在,和組件本身的實現沒有任何關系,不需要添加任何組件實現的功能,完美實現了邏輯重用
五、其他新增特性:
?Teleport
-瞬移組件的位置,"傳送"
作用:把指定的元素或組件渲染到任意父級作用域的其它DOM節點上
應用場景:常用于封裝Modal彈框組件
語法:<Teleport>
接收一個to prop
來制定傳送的目標。to 的值可以是一個 CSS 選擇器(如:to=".box"、to="#box"
),也可以是一個 DOM 元素對象(如:to="body"
)
Modal.vue
<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['cancel'])
const closeModal = () => {
emit('cancel')
}
</script>
<template>
<!-- 當Modal彈窗顯示時,將其插入到<body>標簽中去 -->
<teleport to="body">
<div class="modal-layer" v-if="visible">
<div class="modal">
<header @click="closeModal" class="close">X</header>
<main>
<slot></slot>
</main>
<footer></footer>
</div>
</div>
</teleport>
</template>
defineProps 用于接收父組件傳遞過來的自定義屬性
defineEmits 用于聲明父組件傳遞過來的自定義事件;子組件通過 defineEmits 獲取 emit 對象(因為沒有 this)
Page.vue
<script lang="ts" setup>
import { ref } from 'vue'
import Modal from '../components/Modal.vue'
const isShow = ref(false)
const openModal = () => {
isShow.value = true
}
const closeModal = () => {
isShow.value = false
}
</script>
<template>
<div class="page">
<Modal :visible="isShow" @cancel="closeModal">
<div>彈框主體內容</div>
</Modal>
<button @click="openModal" class="btn">打開彈窗</button>
</div>
</template>
? Suspense
-異步加載組件
作用:常用于給異步組件加載時,顯示loading
xxx.vue
<script lang="ts" setup>
// import AsyncCom from '../components/AsyncCom.vue'
import { defineAsyncComponent } from 'vue'
const AsyncCom = defineAsyncComponent(() => import('../components/AsyncCom.vue'))
</script>
<template>
<div class="my">
<Suspense>
<!-- 具有深層異步依賴的組件 -->
<AsyncCom></AsyncCom>
<!-- 在fallback插槽中顯示'正在加載中' -->
<template #fallback> Loading... </template>
</Suspense>
</div>
</template>
AsyncCom.vue
<script lang="ts" setup>
import { ref } from 'vue'
const data = ref(null)
function delay(ms, value) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(value)
}, ms)
})
}
data.value = await delay(1000, 3)
</script>
<template>
<div class="child">
<h1>child page{{ data }}</h1>
</div>
</template>
監控Suspense出現的錯誤:使用onErrorCaptured()
生命周期鉤子函數,返回一個boolean
值
const error = ref(null)
onErrorCaptured((e) => {
error.value = e
// return true 表示錯誤是否向上傳遞
return true
)
? 全局API的修改和優化
全局配置Vue.config
→ app.config
全局注冊類API:Vue.component
→ app.component
全局指令:Vue.directive
→ app.directive
行為擴展類API:Vue.mixin
→ app.mixin
安裝全局插件 Vue.use
→ app.use
nextTick()
、observable()
...
? 直接使用script
添加一個setup
屬性就可以直接使用Composition API