vue生命周期详细解析

beforeCreate( 创建前 )
创建前的阶段,这时候我们是访问不到data当中的属性以及methods当中的属性和方法.
我们可以在这里做一个loading,等加载页面完成(也就是后面说的mounted()后)再销毁这个loading。

created ( 创建后 )

在这里我们已经可以访问到data和methods,这是用的最多的一个生命钩子函数之一

可以调用methods中的方法,改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,也有一些童鞋喜欢在这里发ajax请求,

值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter中完成

beforeMount()

挂载前,在这里可以对数据进行最后的修改,也可以在这里向后端获取数据,不过不推荐,一样都是在created()获取,说实话,这个钩子函数我很少用。

mounted
挂在完成,也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次。

一般来说,我们在此处发送 异步请求 (ajax,fetch,axios等),获取服务器上的数据,显示在DOM里。

beforeUpdate
在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程

updated(更新后)
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用

beforeDestroy(销毁前)
在实例销毁之前调用,实例仍然完全可用,

1、这一步还可以用this来获取实例,
2、一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件

destroyed(销毁后)
在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

activated
组件激活时调用。该钩子在服务器端渲染期间不被调用

deactivated
组件停用时调用。该钩子在服务器端渲染期间不被调用

errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
 

原文地址:https://www.cnblogs.com/caimengting/p/15128449.html