VUE生命周期函数
声明周期函数指,在某一时刻会自动执行的函数。(声明周期函数也叫钩子函数)
vue组件(对象)从创建到(初次)显示在用户眼前:经历了
beforeCreate,created,beforeMount,mounted
vue对象生命周期有四个阶段和八个钩子函数:
一、数据挂载阶段
!!!核心:把传入的data属性的内容(data配置项),赋给vue对象。
即:把形参中data的属性赋给vue对象。
1. beforeCreate( )
在初始化实例创建之前执行的函数
2. Created( )
在初始化实例创建 之后执行的函数
二、模板渲染阶段
!!!核心:把vue对象中data渲染到dom对象上(模板上,视图上)
3. beforeMount( )
在组件内容被渲染到页面之前自动执行的函数
注意:此时无法找到任何模板DOM节点
4. Mounted( )
在组件内容被渲染到页面之后自动执行的函数
三、组件(模板)更新阶段
!!!核心:当数据(必须是在模板上使用的数据)发生变化时,
会触发组件的更新,组件会重新渲染。
5. beforeUpdate( )
在数据将要变化之前自动执行的函数
6. updated( )
在数据发生变化之后自动执行的函数
四、组件销毁阶段
7. beforeDestroy( )
在VUE实例销毁之前自动执行的函数
8. destroyed( )
在VUE实例销毁之后自动执行的函数
如果组件在<keep-alive></keep-alive>缓存的话((可以提高性能,组件不会被销毁))
组件切换时,会调用的钩子函数是:activated 和 deactivated
为什么叫钩子函数:和回调函数是同样的道理,
只不过钩子函数更多会强调(函数调用的)时机。
1、如果一打开组件,就需要显示数据,那么请求,应该在哪个钩子函数里写?为什么?
created,
因为,一般来说,后端返回来的数据需要赋给vue对象的属性(this.属性名),
在created里是最早能够拿到vue对象属性的。
如果在beforeMount和mounted里就有点晚了。
2、如果组件在keep-alive里,而且有定时器(比如:轮播图),
在deactivated时,可以停止定时器。
![在这里插入图片描述](https://img-blog.csdnimg.cn/9e3a474120c44c4eaebad93805a2fdcc.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBARW5zb2xlaWxlMjAyMQ==,size_20,color_FFFFFF,t_70,g_se,x_16)