Life Cycle 生命週期 in composition API

前言生命週期的相关内容其实翻了蛮多次，但之前因为急着用，所以并没有很静下心来研究整个循环到底在做什么，概念很模糊，同样也是用得很没安全感，今天年假放完第一天，打算把这块补上，但早上有点抓不到节奏，一下跳这一下跳那，不知道自己该从何学起，下午终于还是回到Vue官方文件，老老实实地啃英文，看不懂就不断的重看，再这样来来回回几遍后，好像有点懂了。试解释SPA(Single Page Application)早上乱看跳来跳去最大的收穫就是理解了SPA，所以在讨论生命週期之前，很想提一下，这也是为什么我们要用Vue框架的原因之一。以前使用者在浏览器浏览网页并按下网页内任何可点击位置，都会发送请求至伺服器，等待伺服器端準备妥善后回传，较为耗时没有效率。如果改以Vue框架的方式生成，它的概念是在同一个页面下，当使用者点击后，Vue随即拦截并依指定请求更换适当组件后回传，不再需要回到server端，缩短时间成本提升效率，而这样以同一页面不同组件实现的方式即为SPA。试解释生命週期每一个vue档案，有其生命週期，也就是整个档案的从无到有再从有到无的过程，其实每个实质的东西都有其寿命，在每个阶段，会有该阶段必须发生的事，不能早也不能晚，例如一个小孩不同年龄有不同的补助津贴，必须在指定时间申请。到了入学的年龄，必须注册登记入学，诸如此类，关于写code，同样要从一开始就得想个八九成，好好的把什么时候该发生什么事登记下来，以防歪楼，你说对吧！官网很经典的示意图如下：
以我目前的认知，有底色搭配白字的部分是动态过程，交代在当下Vue instance所做的事情有色框白底是Vue instance各阶段，同时有其对应的lifecycle hooks，有了这些hooks，我们就可以预先把该发生的事都登记在hook中，这些预先登记好的事件会在一开始setup()的阶段，被同步呼叫并依序堆叠至call stack中，静待生命週期发展到适当时机，使这些已登记的事件一一发生Lifecycle Hookssetup(): 等同于Option API中的beforeCreate跟created阶段，Vue instance成立，各事件状态完成初始化onBeforeMount():Vue instance还没与Template(Dom节点)绑定onMounted():Vue instance挂载完成，所以如有需要手动操作Dom API，要在此阶段完成后再进行操作，以免操作的Dom节点被Vue.js替换掉onBeforeUpdate():当状态被变动时，画面同步更新前onUpdated():当状态被变动时，画面已同步更新完成onBeforeUnmount():Vue instance被销毁前onUnmounted():Vue instance完成销毁时，通常会使用它来清除计时器、事件监听器及伺服器连结onErrorCaptured():子/孙代元件的错误被捕获时触发心得
笔记写一写，有个困惑点，所以我所有的函式都要安稳地先登记在各阶段吗？跟实作上好像有差异，思考一下之后，自己目前的理解是很明确在那一个阶段必须发生的事情才会先登记，例如小孩7岁就是要读国小，这种很明确的大事，而养小孩的过程，会有许许多多因小孩而异的不同事件，比如有的要去学钢琴，有的要去学画画，在开发上就是先用函式表达，等要用到时再呼叫，而不需要一开始就登记在Lifecycle hook上。
写完这篇，以养小孩类比的方式，确实让我更能理解其中的意义，未来使用上应该也会来得比较直觉。参考资料lifecycle-diagramcomposition-api-lifecycleVue JS 3 Tutorial for Beginners #1 - IntroductionCH1/1-7-lifecycle