vue的8个生命周期函数理解

梦里梦外; 2023-01-13 01:50 106阅读 0赞

初始化页面的时候  
new Vue() 开始创建一个vue的实例对象。

1、beforeCreate 刚刚初始化了一个vue空的实例对象，这时候，对象上，只有默认的一些生命周期函数和默认事件，data和methods中的数据还没有被初始化。

2、created data和methods都已经被初始化好了，如果调用methods中的方法和操作data中的数据最早只能在created中

3、beforeMount 这一步的时候，模版已经在内存中编译好了，但是尚未挂载到页面中去，此时，页面还是旧的。

4、mounted 这一步 将内存中变异好的模版，替换到浏览器的页面中去，如果需要操作页面上的DOM元素最早需要再mounted中进行。

5、beforeUpdated 这一步 页面中显示的数据还是旧的，但是data中的数据是最新的，页面尚未更新。这里会先根据data中最新的数据，在内存中，重新渲染出一份 最新的虚拟DOM树，当虚拟DOM树跟新后，会把最新的虚拟DOM渲染到页面中去。完成从model-》view的更新。

6、updated 这一步 页面和打他数据已经保持同步了，都是最新的。  
组件的生命周期函数只有beforeUpdated和updated。

7、beforeDestroy 这一步 vue实例已经从运行阶段进入到销毁阶段，但是此时data和所有的methods，以及过滤器，指令还处于可用状态，没有真正的销毁。

8、destroyed 此时 组件已经完全被销毁，此时data和methods，过滤器，指令都已经不可用了。

最后附上流程图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/da9042bd165e4e2697a6dd5ca95c70fe.png

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue生命周期函数

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K

我会带着你远行/ 2023年10月01日 10:15/ 0 赞/ 29 阅读

相关 vue的8个生命周期函数理解

初始化页面的时候 new Vue() 开始创建一个vue的实例对象。 1、beforeCreate 刚刚初始化了一个vue空的实例对象，这时候，对象上，只有默认的一些生命

梦里梦外;/ 2023年01月13日 01:50/ 0 赞/ 107 阅读

相关深入理解Vue生命周期函数

对Vue生命周期函数的个人理解对于Vue已经学习了有一段时间了，但是有些东西还是似懂非懂，尤其是对于Vue生命周期函数，仅仅是有一些印象，但是在实际的运用过程中还是不会

柔情只为你懂/ 2022年10月27日 01:35/ 0 赞/ 126 阅读

相关【Vue】—生命周期函数

【Vue】—生命周期函数（钩子函数） ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text

朱雀/ 2022年09月11日 13:12/ 0 赞/ 228 阅读

相关 vue生命周期函数

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>生命周期</title> </hea

谁借莪１个温暖的怀抱￠/ 2022年05月25日 11:25/ 0 赞/ 233 阅读

相关 VUE生命周期函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫

﹏ヽ暗。殇╰゛Y/ 2022年04月22日 14:54/ 0 赞/ 269 阅读

相关 Vue 生命周期函数

个人感觉生命周期函数用到的地方并不是很多，这是我学习时敲的一些代码，详情用法可参照官方文档。 App.vue <template> <div

一时失言乱红尘/ 2022年03月25日 19:12/ 0 赞/ 264 阅读

相关 Vue生命周期函数

Vue 的声明周期函数 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

傷城~/ 2022年02月25日 12:42/ 0 赞/ 291 阅读

相关 vue 生命周期函数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW4x

古城微笑少年丶/ 2022年02月21日 09:43/ 0 赞/ 290 阅读

相关 vue 生命周期函数

组件声明周期函数在script中与data同级使用 beforeCreate 组件创建前,数据观测 (data observer)

女爷i/ 2021年07月24日 22:56/ 0 赞/ 513 阅读