Vue---Vue生命周期(回调)函数

小鱼儿 2023-02-12 03:28 2阅读 0赞

*  **beforeCreate()\{\}    创建前**

**实例完全被创建出来之前，实例dom和数据对象 data 都为 undefined，还未初始化。**

*  **created()\{\}             创建后**

**          数据对象 data 已存在，此时可以调用 methods 中的方法，操作 data 中的数据，但实例dom 还未生成，不能进行dom操作，如果需要操作dom，可以在 this.$nextTick(() => \{ \}) 中进行操作。**

*  **beforeMount()\{\}     挂载前**

**          vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。**

*  **mounted()\{\}          挂载后**

**           vue 实例挂载完成。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，dom 渲染在 mounted 中就已经完成了。**

*  **beforeUpdate()\{\}   更新前**

**          data 数据发生了变化，但页面上的data还没有进行同步更新，此时会触发执行beforeUpdate方法 。**

*  **updataed()\{\}         更新后**

**         页面和 data 数据已经保持同步后，会触发执行updataed方法。**

*  **beforeDestory()\{\}  销毁前**

**         组件销毁之前调用 ，在这一步，实例仍然完全可用。**

*  **destroyed()\{\}        销毁后**

**         组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。**

### 其他补充： ###

*  **activated()\{\} ** 
 *  **deactivated()\{\} **

**使用场景：若一个组件被缓存，即被放到了<keep-alive>标签内。在第一次进入该组件时或者刷新页面时会走组件的生命周期函数，还会执行activated函数(activated执行时机在mounted函数之后)。在离开此页面之前，此组件不会被销毁，而是会被缓存。还会执行deactivated函数，当再次进入此组件页面时，此组件就不会走生命周期函数了，而是直接执行activated****函数，离开页面会执行de****activated函数****。**

*  **beforeRouteEnter(to,from,next)\{\}**
 *  **beforeRouteLeave(to,from,next)\{\}**

**除了上面的activated()\{\}钩子函数外，也可以使用组件内的路由导航守卫函数实现同样效果。即分别进入此路由页面时离开此路由页面的钩子函数。**

发表评论取消回复

表情：

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

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

相关阅读

相关详解Spring中bean生命周期回调方法

> 对于spring的bean来讲，我们默认可以指定两个生命周期回调方法。一个是在ApplicationContext将bean初始化完全完成后，包括注入对应的依赖（例如属性注

超、凢脫俗/ 2023年10月08日 08:16/ 0 赞/ 50 阅读

相关 reactjs生命周期回调(钩子)函数：componentDidMount componentWillUnmount

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

冷不防/ 2023年10月01日 02:54/ 0 赞/ 69 阅读

相关 Vue---Vue生命周期(回调)函数

beforeCreate()\{\} 创建前实例完全被创建出来之前，实例dom和数据对象 data 都为 undefined，还未初始化。

小鱼儿/ 2023年02月12日 03:28/ 0 赞/ 3 阅读

相关信号与槽、回调的生命周期问题

信号与槽、回调的生命周期问题 1 介绍 2 测试 2.1 Qt 信号与槽 2.2 回调参考 1 介绍回调函数就是一

谁借莪１个温暖的怀抱￠/ 2023年01月03日 04:27/ 0 赞/ 133 阅读

相关微信小程序+生命周期回调函数

> 在微信小程序的.js文件用于编写页面逻辑 > > Page()函数用来注册一个页面，该函数的参数是一个对象 > > 通过该对象可以指定页面的初始数据，生命周期回调函数、

た入场券/ 2022年11月05日 13:51/ 0 赞/ 284 阅读

相关场景的生命周期及回调方法

一、场景之间切换，一般由Director来操作，有两种方式： 1、push和pop压栈的形式，在A场景，push B场景，A场景还存在，只是显示的是B场景，然后pop回A场景

素颜马尾好姑娘i/ 2022年08月05日 13:04/ 0 赞/ 191 阅读

相关 Spring（09）——bean生命周期回调方法

9 生命周期回调方法对于`Spring bean`来讲，我们默认可以指定两个生命周期回调方法。一个是在`ApplicationContext`将`bean`初始化，包括

╰半夏微凉°/ 2022年06月12日 06:28/ 0 赞/ 189 阅读

相关 CocosCreator的生命周期回调

记录 1、如果该Node正常初始化或初始化隐藏然后active由false置为true，则执行顺序都为：onLoad -> onEnable -> start； 2、当

拼搏现实的明天。/ 2022年05月28日 12:37/ 0 赞/ 239 阅读

相关 Spring入门:生命周期回调!!

看代码: 定义一个Foo类 public class Foo \{ 定义一个初始化的方法 public void

秒速五厘米/ 2022年05月16日 00:52/ 0 赞/ 224 阅读

相关 Spring 生命周期回调机制

一、Spring 生命周期回调机制可选方式 Spring[官方文档][Link 1]注明从Spring 2.5开始，您可以使用三种方式来控制Bean生命周期行为：

爱被打了一巴掌/ 2021年09月21日 03:34/ 0 赞/ 378 阅读