生命周期函數的新寫法 · vue筆記

[TOC] >[success] # 生命周期函數的新寫法 **vue2.x** 版本中 **[生命周期寫法](http://www.hmoore.net/wangjiachong/vue_notes/2140861)**，目前新的 **composition API** 中的 **生命周期** 都需要寫在 **setup函數** 中，用 **按需引入** 的方式來使用，具體代碼如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生命周期函數的新寫法</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ setup(){ const { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } = Vue const name = ref('dell') // beforeMount 等同于 onBeforeMount onBeforeMount(() => { console.log('onBeforeMount') }) // mounted 等同于 onMounted onMounted(() => { console.log('onMounted') }) // beforeUpdate 等同于 onBeforeUpdate onBeforeUpdate(() => { console.log('onBeforeUpdate') }) // updated 等同于 onUpdated onUpdated(() => { console.log('onUpdated') }) // beforeUnmount 等同于 onBeforeUnmount（當組件從頁面v-if隱藏移除時會執行） onBeforeUnmount(() => { console.log('onBeforeUnmount') }) // unmounted 等同于 onUnmounted（組件從頁面移除后執行） onUnmounted(() => { console.log('onUnmounted') }) // 定義方法 const handleClick = () => { name.value = 'lee' } return { name, handleClick } }, template: ` <div @click="handleClick">{{name}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ **composition API** 中很多的 **生命周期** 與原來一樣，不同的就是 **名字有所改變而已**。 >[success] ## 棄用的生命周期在 **composition API 中有 beforeCreate 與 created 這 2 個生命周期函數我們是不能使用的** ，因為 **setup 函數執行的時間點，在 beforeCreate 與 created 之間** ，所以這 **2** 個 **生命周期** 中要寫的東西，直接寫在 **setup** 中就可以了。 >[success] ## 新的的生命周期 **composition API** 出了 **2** 個新的 **生命周期函數** ，**onRenderTracked 與 onRenderTriggered** ，代碼如下： **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生命周期函數的新寫法</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ setup(){ const { ref, onRenderTracked, onRenderTriggered } = Vue const name = ref('小明') // 每次渲染后重新收集響應式依賴 onRenderTracked(() => { console.log('onRenderTracked') }) // 每次觸發頁面重新渲染時自動執行 onRenderTriggered(() => { console.log('onRenderTriggered') }) // 定義方法 const handleClick = () => { name.value = 'lee' } return { name, handleClick } }, template: ` <div @click="handleClick">{{name}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~