VUE生命周期函数

VUE生命周期函数_第1张图片## vue生命周期(钩子函数)
生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这个初始化,又会不同阶段默认调用一些函数执行,这些函数就是生命周期的钩子函数;

生命周期钩子函数,让够让咱们在初始化实例时,添加自己的代码;
生命周期的钩子函数中的this,会默认指向vue的实例

1.beforeCreate
a: 创建VUE实例之前,
b: 在beforeCreate生命周期函数执行的时候data和methods中的数据都还没初始化,在这个钩子函数中,不能获取data中的数据.
c: 这个函数不能操作DOM

2.created
a: 创建实例成功之后,(一般在这里实现数据的异步请求)
b: data和methods中的数据都已经初始化好了,如果想使用methods中的方法,或者是操作data中的数据,最早只能在created中操作。

3.beforeMount
a: 渲染DOM之前(加载组件第一次渲染)
b: 此函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时的也面还是旧的。
(注意一个细节点,更改数据尽量在mounted之前,在mounted之前改数据,不会调用beforeUpdate这个函数;提高性能)
4.mounted
a: 渲染DOM完成(加载组件第一次渲染)
b: 数据和DOM都完成挂载,如果要通过某些插件操作页面上的DOM节点,最早在mounted中进行,不过在created请求会更好点。

5.beforeUpdate
a: (重新渲染完成之前)更新数据之前执行
b: 当数据更新时,会调用beforeUpdate和updated钩子函数;上面四个不再运行
c: 页面显示的数据还是旧的,此时data中的数据是最新的,页面尚未和最新的数据保持一致。

6.updated
a: 重新渲染完成。
b: 只要页面中的数据改变了,都会触发,页面和data数据已经保持同步了,都是最新的。
c: 5和6这两个方法要慎用,因为是页面更新数据时触发,在这里操作数据容易死循环。

7.beforeDestroy
a: 销毁之前
b: 当执行这个钩子函数的时候,vue实例就已经从运行阶段进入到了销毁阶段,实例上所有的methods,以及过滤器,指令…都处于可用状态,此时还未销毁。
c: 如果页面中有定时器,我们会在这个钩子中清除定时器;

8.destroyed
a: 销毁完成
b: 当执行这个函数时,组件已经被销毁了,所有的数据,方法,指令…都不可以用了,毁子组件,销毁观察者,事件监听者
c: DOM元素的事件还在,但是更改数据不会让视图进行更新了。
d: Vue 实例销毁后调用,实例中的属性也不再是响应式的,watch 被移除。

9.activated
a: 当缓存组件有被显示出来时,会触发这个钩子函数
b: 写在组件中

10.deactivated
a: 当缓存的组件隐藏时,会触发这个钩子函数;
b: 写在组件中

11.errorCapture
a: 当子孙组件出错时,会调用这个钩子函数
b: 写在组件中

你可能感兴趣的:(VUE.JS,vue)