Vue 3框架组合式API的生命周期挂钩
Le Sun 23 February 2025
姑娘不喜欢Vue，也不喜欢Vue 3框架组合式API中的生命周期挂钩。
姑娘喜欢回调函数。至少，回调函数很漂亮。姑娘喜欢漂亮之人、漂亮之物。
Vue 3中有如此之物：
function onMounted(callback: () => void): void
function onUpdated(callback: () => void): void
function onUnmounted(callback: () => void): void
function onBeforeMount(callback: () => void): void
function onBeforeUpdate(callback: () => void): void
function onBeforeUnmount(callback: () => void): void
function onErrorCaptured(callback: ErrorCapturedHook): void
function onRenderTracked(callback: DebuggerHook): void
function onRenderTriggered(callback: DebuggerHook): void
function onActivated(callback: () => void): void
function onDeactivated(callback: () => void): void
function onServerPrefetch(callback: () => Promise<any>): void
姑娘看完亦不知所云。姑娘喜欢听到黄鹂、画眉这样清脆、清晰的名字。 不喜欢什么挂上了、挂上之前、动了之类的毫无辨识性的所谓挂钩。
姑娘喜欢干练、利落的行为。不喜欢一大堆难以辨别之物。
姑娘喜欢这样的：
- (void) viewWillAppear:(BOOL) animated;
- (void) viewIsAppearing:(BOOL) animated;
- (void) viewDidAppear:(BOOL) animated;
- (void) viewWillDisappear:(BOOL) animated;
- (void) viewDidDisappear:(BOOL) animated;
“田田新叶翠，款款白鸥轻。”如泛舟碧波，美景缓缓映入眼帘，平和宁静。而观Vue 3所谓挂钩，则如星球破裂，不知谁先谁后，何处落脚停歇。
再观Vue 3挂钩的写法：
<script setup>
import { onMounted } from 'vue'
let hers_first_toy = '0x00'
let hers_second_toy = '0x01'
let hers_third_toy = '0x03'
let hers_toys = []
onMounted(() => {
let max_keep = 1024
while (max_keep <= hers_toys.length) {
buy_a_new_toy()
}
})
function buy_a_new_toy() {
let toy_number = (hers_toys.length + 1)
let toy = `her's ${toy_number} toy`
hres_toys.push(toy)
}
script>
回调函数是程序调用姑娘自己的函数，而不是姑娘自己去调。 看Vue 3的这种写法，似乎是姑娘自己去调用。
要是调用它很多次会怎么样？不得而知。
姑娘喜欢写好完整的函数，让系统去调用。这样，只有一个回调函数。
- (void) viewWillAppear:(BOOL) animated
{
[super viewWilLAppear: animated];
[self buySomeMoreToy];
}