今天給大家帶來的的內容是compotion內的生命周期、計算屬性、watch的使用
生命周期
vue3中生命周期在composition api中有一些小的改動
寫法為
import { onMounted } from 'vue'
setup () {
console.log('內部的created')
onMounted(() => {
console.log('內部mounted')
})
}
vue3中基本有大部分的周期，去掉了beforeCreate和created，不過我們可以在setup中直接寫一些代碼，這些代碼相當於是created執行，我專門嘗試了一下，composition api的周期和optionsAPI是不沖突的，會在options同周期之后執行
可以用下面代碼進行測試
import { onMounted } from 'vue'
export default {
mounted(){
console.log('外部的mounted')
},
setup () {
console.log('內部的created')
onMounted(() => {
console.log('內部mounted')
})
}
}
vue3對應vue2的周期為（compositionapi的周期都需要引入！！！）：
- beforeCreate -> 使用setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
- activated -> onActivated
- deactivated -> onDeactivated
好了，周期告一段落，基本常用的也就這幾個，有以下幾個周期發生變化：
1、beforeDestroy、destroyed 被替換為了onBeforeUnmount、onUnmounted
2、去掉了beforeCreate、created請直接使用setup
3、新增了onRenderTracked、onRenderTriggered（兩個鈎子都收到DebuggerEvent類似於onTrack和onTrigger觀察者的選項）
計算屬性和watch
上完整代碼：
import { reactive, watch, toRefs, computed,watchEffect } from 'vue'
export default {
setup () {
const state = reactive({
count: 0,
doubleCount: computed(() => {
return state.count * 2
}),
a: 1,
watchCount: 0,
watchCount1: 1
})
watchEffect(() => {
console.log('watchEffect', state.count, state.a)
}, {
onTrack() {
console.log('onTrack調用') // 當反應性屬性或ref作為依賴項被跟蹤時
},
onTrigger() {
console.log('ontrigger調用') // 當觀察程序回調由依賴項的變異觸發時
}
})
watch(() => {
return [state.watchCount, state.watchCount1]
}, (val, prev) => {
console.log(val, prev)
})
setTimeout(() => {
state.watchCount++
}, 1000)
const addRef = () => {
state.count++
}
return {
// 將代理對象轉換為純對象。並對其每個key做包裝，包裝為ref
...toRefs(state),
addRef,
}
}
}
watchAPI與2.x this.$watch（以及相應的watch選項）完全等效。watch需要查看特定的數據源，並在單獨的回調函數中應用副作用。默認情況下，它也是惰性的-即僅在監視的源已更改時才調用回調。
-
與相比
watchEffect，watch可以讓我們： - 懶惰地執行副作用；
- 更具體地說明應觸發觀察程序重新運行的狀態；
- 訪問監視狀態的先前值和當前值。
watchEffect是可以暫停的，可以將他賦值給一個變量，並且調用，如下：
const stop = watchEffect(() => { /* ... */ }) // later stop()
兩者區別我個人覺得是如下幾點：
1、
watchEffect 可以手動停止，而非一定要結束之后在停止
2、watch是惰性執行，watchEffect默認會執行一次（watch當然也可以，但是需要像2.x一樣配置）
3、watch只可以監聽他數組中的變量，而不能監聽其余的變化（經測試，我發現如果在第一個參數內寫一些操作也是可以監聽到內部使用的變量，不過這樣已經違反了vue3.x的這個參數的意義，肯定是不建議的）
4、參數不一樣（watch(source,callback,options),warchEffect(effect,options)）
5、watch可以和以前一樣監聽值變化的先后變化（也有一些小變化，因為3.x支持多個值監聽，所以newvalue和oldvalue都是一個數組）
emmmm....大概就這么多不同吧，接下來就composition應該是還有兩篇文章，我是這么打算的下一章給大家說一下其余的一些普通用法和api的使用，下下篇給大家說一些高級用法和api的使用。感謝大家支持，我會盡可能的搞全一些，所以篇章比較多，希望大家都能盡快上手。