理解 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> ~~~