Vue.js -- 生命周期函数（钩子）

最新推荐文章于 2023-08-09 10:07:46 发布

爱划水de鲸鱼哥～

最新推荐文章于 2023-08-09 10:07:46 发布

阅读量88

点赞数

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/m0_47901007/article/details/132976016

版权

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

Vue生命周期

Vue 实例从开始创建、初始化数据、编译模板、挂载DOM、更新渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。

Vue生命周期的作用

Vue 所有功能实现都是围绕生命周期进行；

在不同阶段调用对应的钩子，实现组件数据管理和DOM渲染；

生命周期函数(钩子)

生命周期函数是指在某一时刻自动执行的函数。

Vue生命周期图示

在这里插入图片描述

从图中可以看出，Vue的生命周期包括初始化、挂载、更新和销毁四个阶段，八个生命周期。

Vue各生命周期函数的描述

代码演示

html <!DOCTYPE html> <html lang="en"> <head> <title>vue生命周期函数</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> <script> const app = Vue.createApp({ data(){ return { content: 'Hello Vue.js!' } }, beforeCreate(){ console.log(document.getElementById('root').innerHTML, 'beforeCreate'); },created(){ console.log(document.getElementById('root').innerHTML, 'created'); },beforeMount(){ console.log(document.getElementById('root').innerHTML, 'beforeMount'); },mounted(){ console.log(document.getElementById('root').innerHTML, 'mounted'); },beforeUpdate(){ console.log(document.getElementById('root').innerHTML, 'beforeUpdate'); },updated(){ console.log(document.getElementById('root').innerHTML, 'updated'); },beforeUnmount(){ console.log(document.getElementById('root').innerHTML, 'beforeUnmount'); },unmounted(){ console.log(document.getElementById('root').innerHTML, 'unmounted'); }, template:'<div>{{content}}</div>' }) const vm = app.mount('#root'); </script> </body> </html>