vue生命周期理解干货

不知名码农_

于 2020-12-02 15:00:29 发布

阅读量186

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/JQery/article/details/110481757

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue.js的生命周期函数，包括创建前、创建后、挂载前、挂载后、更新前、更新后、销毁前和销毁后。阐述了每个阶段数据和页面的状态，如创建后可操作数据，挂载后页面渲染完成，更新前后数据与页面同步情况等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

beforeCreate（创建前）

data和methods中的数据都还没有初始化完成

created（创建后）

如果要调用methods中的方法或者操作data中的数据最早只能在created中操作

在这里插入图片描述

beforeMount（挂载前）

这里是遇到的第三个生命周期表示模板已经在内存中编译完成了但是尚未把模板渲染到页面中

//执行的时候页面中的元素还未真正的替换过来只是之前的一些模板字符串

Mounted（挂载后）

这是第四个生命周期函数表示内存中的模板已经真实的挂载到了页面中用户已经可以看到渲染到的页面了只要执行完了mounted 表示整个vue实例全部初始化完毕了组件已经脱离了创建阶段进入到了运行阶段

在这里插入图片描述

beforeUpdata（更新前）

数据被更新了当执行beforeUpdata时页面中显示的数据,还是旧的此时data的数据是新的,但是页面尚未和最新的数据保持同步

updated（更新后）

页面和数据保持了同步更新

这一步执行的是:先根据data中最新的数据,在内存中,重新渲染出一份最新的内存DOM树

当最新的内存DOM树被更新后会把其渲染到页面上去,这时候就完成了数据从data( model层 ) -> view (视图层)的更新

这两个事件(beforeUpdata updated)会根据data数据的改变而选择性的触发0次到多次
在这里插入图片描述

beforeDestroy（销毁前）

当执行了beforedestroy钩子时,Vue实例已经从运行阶段,进入到了销毁过程

但是此时实例身上的所有 data methods 过滤器指令等等都处于一个可以用的状态此时还未真正销毁

Destroyed（销毁后）

当执行到了destroyed函数时组件已经被完全销毁了组件中所有的数据方法指令等等都已经不可以使用

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。