理解 Vue 中的生命周期函數 · vue筆記

[TOC] >[success] # 理解 Vue 中的生命周期函數 ![](https://img.kancloud.cn/24/7c/247c89e23c2518912d7434f004ef183d_1200x3039.png) 本章節講解了， **vue** 的 **生命周期** 的 **執行順序** ，**vue** 目前總共 **8個生命周期** ，大家只需要記住： **生命周期，是在謀一時刻會自動執行的函數** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue的生命周期</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 生命周期函數：在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, // 1. 在實例生成之【前】會自動執行的函數 beforeCreate(){ console.log('beforeCreate') }, // 2. 在實例生成之【后】會自動執行的函數 created(){ console.log('created') }, // 3. 在組件內容被渲染到頁面之【前】立即執行的函數 beforeMount(){ console.log(document.getElementById('root').innerHTML, 'beforeMount') }, // 4. 在組件內容被渲染到頁面之【后】立即執行的函數 mounted(){ console.log(document.getElementById('root').innerHTML, 'mounted') }, // 5. 當數據發生變化時會立即自動執行的函數 beforeUpdate(){ console.log(document.getElementById('root').innerHTML, 'beforeUpdate') }, // 6. 當數據發生變化，頁面重新渲染后，會自動執行的函數 updated(){ console.log(document.getElementById('root').innerHTML, 'updated') }, // 7. 當 Vue 應用失效時，自動執行的函數（被銷毀時執行的函數，執行app.unmount()），從掛在的#root元素上解開綁定 beforeUnmount(){ console.log(document.getElementById('root').innerHTML, 'beforeUnmount') }, // 8. 當 Vue 應用失效時，且 dom 完全銷毀之后，自動執行的函數 unmounted(){ console.log(document.getElementById('root').innerHTML, 'unmounted') }, methods: { handleItemClick(){ alert('click') } }, template: '<div v-on:click="handleItemClick">{{message}}</div>' }) const vm = app.mount('#root') </script> </html> ~~~ 如果 **實例化** 的 **Vue根組件對象** 中也可以不寫 **template** 屬性，可以直接在 **元素內部** 使用 **表達式** 的方式來做到同樣效果，如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue的生命周期</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"> <div v-on:click="handleItemClick">{{message}}</div> </div> </body> <script> // 生命周期函數：在謀一時刻會自動執行的函數 const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, // 1. 在實例生成之【前】會自動執行的函數 beforeCreate(){ console.log('beforeCreate') }, // 2. 在實例生成之【后】會自動執行的函數 created(){ console.log('created') }, // 3. 在組件內容被渲染到頁面之【前】立即執行的函數 beforeMount(){ console.log(document.getElementById('root').innerHTML, 'beforeMount') }, // 4. 在組件內容被渲染到頁面之【后】立即執行的函數 mounted(){ console.log(document.getElementById('root').innerHTML, 'mounted') }, // 5. 當數據發生變化時會立即自動執行的函數 beforeUpdate(){ console.log(document.getElementById('root').innerHTML, 'beforeUpdate') }, // 6. 當數據發生變化，頁面重新渲染后，會自動執行的函數 updated(){ console.log(document.getElementById('root').innerHTML, 'updated') }, // 7. 當 Vue 應用失效時，自動執行的函數（被銷毀時執行的函數，執行app.unmount()），從掛在的#root元素上解開綁定 beforeUnmount(){ console.log(document.getElementById('root').innerHTML, 'beforeUnmount') }, // 8. 當 Vue 應用失效時，且 dom 完全銷毀之后，自動執行的函數 unmounted(){ console.log(document.getElementById('root').innerHTML, 'unmounted') }, methods: { handleItemClick(){ alert('click') } } }) const vm = app.mount('#root') </script> </html> ~~~