Vue生命周期

下图是官方发布的生命周期函数图,接下来将从三个步骤对生命周期函数进行讲解。

一、挂载流程

(一)beforeCreat() 生命周期函数

当我们new Vue() 过后,Vue就会自动帮我们进行初始化操作。

但是这个时候的初始化只对Vue中的声明周期函数、事件等进行初始化,并未进行数据代理。

也就是我们在beforeCreate() 生命周期函数中无法通过vm访问到data中的数据和methods中的方法。

(二)created() 生命周期函数

beforeCreated生命周期函数调用完以后就接着进行初始化。

下一步就是对数据监视和数据代理进行初始化。

也就是我们在created() 生命周期函数中可以通过vm访问到data中的数据和methods中配置的方法。

(三)beforeMount() 生命周期函数

在Vue对于数据的初始化完成过后就开始解析模板,在内存中生成虚拟DOM。

此时的页面还不能显示解析好的内容,呈现的是未经Vue编译的DOM结构。

所有对于DOM的操作,最终都不奏效。

(四)mounted() 生命周期函数

虚拟DOM生成后,将虚拟DOM转化为真实DOM插入页面。

此时的页面中呈现的是经过Vue编译后的DOM。

并且对于DOM的操作均有效,但是要尽可能避免在这个时候操作DOM。

至此初始化过程结束,一般在此时开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。

二、更新流程

当data中的数据改变,就会进行更新流程。

(一)beforeUpdate() 生命周期函数

此时数据是新的,但是页面还是旧的。

也就是说:页面和数据还未保持同步。

(二)updated() 生命周期函数

Vue根据新的数据生成新的虚拟DOM,随后与旧的虚拟DOM进行比较,最终完成页面的更新。

也就是完成了Model -> View的更新。

此时的数据和页面都是新的,也就是数据和页面保持同步。

三、销毁流程

只有Vue实例对象才会进入销毁流程。

销毁vm的方法如下:

vm.$destroy();

(一)beforeDestroy() 生命周期函数

在这个生命周期中,vm中所有的data,methods,指令等都处于可用状态(数据会改变,但是不会再进行页面渲染),马上就要执行销毁流程。

一般在此阶段关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。

(二)destroy() 生命周期函数

在这一阶段Vue实例对象已经被销毁了,但是数据还残留在页面上,一般不会使用该生命函数进行操作。

所有的生命周期函数中的this都是指向Vue实例对象!

相关推荐
mldong24 分钟前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字28 分钟前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
我是ed.1 小时前
cocos Js 使用 webview 通过 postMessage 进行通信
开发语言·javascript·ecmascript
程序视点1 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木1 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的2 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
ayas123192 小时前
CSS学习
前端·css·学习
人生在勤,不索何获-白大侠2 小时前
day25——HTML & CSS 前端开发
前端·css·html
Running_C2 小时前
Content-Type的几种类型
前端·面试
前端Hardy2 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序