vue-生命周期

欢迎来到“雪碧聊技术”优快云博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

目录

一、引出生命周期

1、案例介绍

2、实现上述案例

①使用普通方法

缺点：必须手动点击按钮，触发方法，这样很麻烦。

②使用生命周期函数中的mounted函数

3、什么是生命周期函数？

举例：生命周期函数mounted()，就是在vue模板解析后、DOM元素加载到页面的时刻（即：挂载完毕时），执行的函数。

4、总结

5、注意 

①由于生命周期函数，也是属于vue实例管理的，因此this也指向vue实例本身。

②生命周期函数书写时，要和data、methods是并列关系，并且要加一个()，毕竟是一个函数。

二、生命周期的几个阶段

1、mounted()函数的调用时机：vue模板解析、 DOM元素加载到页面上时（即，挂载完毕时），触发的函数

使用场景：

举例：

 2、beforeDestroy()函数的调用时机：当vue实例销毁前，触发的函数，常用于关闭系统资源。

使用场景：

举例：

三、总结

注意：一般不在beforeDestroy这个生命周期函数里面，编写操作数据的代码。因为触发这个函数时，表明vue实例即将销毁，那么此时再进行数据操作是没有任何意义的。

---

一、引出生命周期

1、案例介绍

一打开页面，就让下面的文字闪烁起来（透明度从1到0一直循环）。

2、实现上述案例

①使用普通方法

运行效果：

缺点：必须手动点击按钮，触发方法，这样很麻烦。

②使用生命周期函数中的mounted函数

运行效果：

3、什么是生命周期函数？

简单来说，生命周期函数，就是在特殊时刻，执行的特殊函数。

举例：生命周期函数mounted()，就是在vue模板解析后、DOM元素加载到页面的时刻（即：挂载完毕时），执行的函数。

4、总结

5、注意 

①由于生命周期函数，也是属于vue实例管理的，因此this也指向vue实例本身。

②生命周期函数书写时，要和data、methods是并列关系，并且要加一个()，毕竟是一个函数。

二、生命周期的几个阶段

生命周期函数，目前共有8个（4对），但是常用的只有两个：mounted()、beforeDestroy()。

1、mounted()函数的调用时机：vue模板解析、 DOM元素加载到页面上时（即，挂载完毕时），触发的函数

使用场景：

举例：

运行效果：

 2、beforeDestroy()函数的调用时机：当vue实例销毁前，触发的函数，常用于关闭系统资源。

使用场景：

举例：

 

三、总结

注意：一般不在beforeDestroy这个生命周期函数里面，编写操作数据的代码。因为触发这个函数时，表明vue实例即将销毁，那么此时再进行数据操作是没有任何意义的。

 

以上就是vue中的生命周期函数，且主要使用其中的mounted()、beforeDestroy()这两个函数。

想了解更多的vue知识，请关注本博主~~