組合式API
介紹
什么是組合式 API(composition API)
- 組合式 API 是 Vue3 提供的新功能，為我們提供了另一種編寫組件的方式
- 代碼共享。在 setup 鉤子里面，可以按邏輯上的關注點來對代碼進行分組，并與其他組件共享代碼。
組合式 API 的出現解決了什么樣的問題
- 隨著Vue項目規模和復雜性的增加，現有 Option API 變得難以應付
- 邏輯并沒有真正地按功能分組，這可能會讓人很難讀懂一個龐大而復雜的組件文件。
- 通過 Option API 實現組件間共享重復的邏輯(共享代碼)比較麻煩
- 通過組合時 API 我們可以將重用邏輯封裝為功能，這個功能可以組件間共享，這樣你就可以在整個應用程序的不同組件中使用這些邏輯。
接口
setup
執行時間
優先于beforeCreate 和 created。setup 選項在組件創建之前執行，一旦 props 被解析，就將作為組合式 API 的入口。
參數
- props:組件傳入的屬性
- context
setup中接受的props是響應式的，當傳入新的props會被及時更新。在setup中不能直接訪問到this對象。
所以在setup中定義props，用這樣的方式
defineProps({
msg: String
})
context是一個普通的JavaScript對象，它暴露組件的三個property
context.attrs, context.slots, context.emit
組合式API生命周期函數
組合式api生命周期
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onUnmounted ( -> destroyed)
onActivated ( -> activited)
onDeacitivated ( ->deacitivated)
onRenderTriggered
onRenderTricked
reactive 和 ref
reactive 和 ref的作用都是定義和跟蹤需要雙向綁定的變量。也就是數據定義，將一個普通對象變為響應式對象。
ref 接收參數并將其包裹在一個帶有 value property 的對象中返回，然后可以使用該 property 訪問或更改響應式變量的值
toRefs的作用就是，將一個reactive對象轉化為屬性全部為ref對象的普通對象
<template>
<div> {{ month }}</div>
</template>
<script>
import {ref,reactive,toRefs } from "vue"
export default defineComponent({
setup() {
const year = ref(0)
const date = reactive({
month: 1
minutes：200
})
return {
year,
...toRefs(date)
}
}
)
</script>
isRef
isRef用于判斷變量是否為ref對象
const unwrapped = isRef(foo) ? foo.value : foo
computed
computed函數與vue2中computed功能一致，它接收一個函數并返回一個value為getter返回值的不可改變的響應式ref對象。
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 錯誤，computed不可改變
// 同樣支持set和get屬性
onst count = ref(1)
const plusOne = computed({
get: () => count.value + 1,
set: val => { count.value = val - 1 }
})
plusOne.value = 1
console.log(count.value) // 0
watch
用法
- 指定依賴源：
在基礎用法中，
當依賴了多個reactive或ref是無法直接看到的，需要在回調中尋找.
<template>
<div>
<input type="text" v-model="state.count">{{state.count}}
<input type="text" v-model="inputRef">{{inputRef}}
</div>
</template>
<script>
import {watch, reactive, ref} from 'vue'
export default {
setup() {
const state = reactive({count: 0})
const inputRef = ref('')
// state.count與inputRef中任意一個源改變都會觸發watch
watch(() => {
console.log('state', state.count)
console.log('ref', inputRef.value)
})
return {state, inputRef}
}
}
</script>
- 指定依賴源
<template>
<div>
state2.count: <input type="text" v-model="state2.count">
{{state2.count}}<br/><br/>
ref2: <input type="text" v-model="ref2">{{ref2}}<br/><br/>
</div>
</template>
<script>
import {watch, reactive, ref} from 'vue'
export default {
setup() {
const state2 = reactive({count: ''})
const ref2 = ref('')
// 通過函數參數指定reative依賴源
// 只有在state2.count改變時才會觸發watch
watch(
() => state2.count,
() => {
console.log('state2.count',state2.count)
console.log('ref2.value',ref2.value)
})
// 直接指定ref依賴源
watch(ref2,() => {
console.log('state2.count',state2.count)
console.log('ref2.value',ref2.value)
})
return {state, inputRef, state2, ref2}
}
}
</script>
- 指定多個數據源
<template>
<div>
<p>
<input type="text" v-model="state.a"><br/><br/>
<input type="text" v-model="state.b"><br/><br/>
</p>
<p>
<input type="text" v-model="ref1"><br/><br/>
<input type="text" v-model="ref2"><br/><br/>
</p>
</div>
</template>
<script>
import {reactive, ref, watch} from 'vue'
export default {
setup() {
const state = reactive({a: 'a', b: 'b'})
// state.a和state.b任意一個改變都會觸發watch的回調
watch(() => [state.a, state.b],
// 回調的第二個參數是對應上一個狀態的值
([a, b], [preA, preB]) => {
console.log('callback params:', a, b, preA, preB)
console.log('state.a', state.a)
console.log('state.b', state.b)
console.log('****************')
})
const ref1 = ref(1)
const ref2 = ref(2)
watch([ref1, ref2],([val1, val2], [preVal1, preVal2]) => {
console.log('callback params:', val1, val2, preVal1, preVal2)
console.log('ref1.value:',ref1.value)
console.log('ref2.value:',ref2.value)
console.log('##############')
})
return {state, ref1, ref2}
}
}
</script>
- 取消watch
<template>
<div>
<input type="text" v-model="inputRef">
<button @click="onClick">stop</button>
</div>
</template>
<script>
import {watch, ref} from 'vue'
export default {
setup() {
const inputRef = ref('')
const stop = watch(() => {
console.log('watch', inputRef.value)
})
const onClick = () => {
// 取消watch，取消之后對應的watch不會再執行
stop()
}
return {inputRef, onClick}
}
}
</script>
-
onCleanyp函數：watch提供了一個onCleanup的副作用清除函數，該函數接收一個函數，在該函數中進行副作用清除。那么onCleanup什么時候執行？
- watch的callback即將被第二次執行時先執行onCleanup。
- watch被停止時，即組件被卸載之后。
-watch選項
deep
深層對象的任意一個屬性的改變都會出發回調的執行
<template>
<div>
<button @click="onClick">CHANGE</button>
</div>
</template>
<script>
import {watch, ref} from 'vue'
export default {
setup() {
const objRef = ref({a: {b: 123}, c: 123})
watch(objRef,() => {
console.log('objRef.value.a.b',objRef.value.a.b)
}, {deep: true})
const onClick = () => {
// 設置了deep之后，深層對象任意屬性的改變都會觸發watch回調的執行
objRef.value.a.b = 780
}
return {onClick}
}
}
</script>
