Vue的生命周期

先放上一张经典大图

Vue的生命周期

生命周期函数就是Vue实例在某一个时间点会自动执行的函数

beforeCreate

在实例初始化之后,数据和事件配置之前被调用。el和data都还没初始化,所以data、methods和computed等都用不了。一般用来在组件挂在之前渲染一些东西。

created

这时候上面的data、methods、computed都已经创建完成了,数据观测,属性和方法的运算,watch/event事件回调都完成了,但这时候挂载阶段mount还没开始,是el并没有完成。这是最常用的生命周期钩子,可以调用methods中的方法,改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上,,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,也在这里发ajax请求,这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter(路由守卫)中完成。

beforeMoun

挂载之前被调用,render(渲染)函数首次被调用(虚拟DOM),这里已经完成了模板编译,data里面的数据和模板会生产HTML,这里el也完成了,但并没有挂载到html页面上。

mounted

el被新创建的vm.$el替换,并挂载到实例上之后调用。数据已经真实渲染到了页面上,在这个钩子函数里面我们可以使用一些第三方插件,还可以做一些ajax操作。但mounted只能执行一次。

首次加载页面时,不会走这两个钩子,只有当数据发生改变的时候才会执行。

beforeUpdate

更新指数据更新,发生在虚拟DOM重新渲染和补丁之前,在这个钩子中可以更改状态而不发生重绘。

updated

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

执行销毁需要调用vm.$destroy()

beforeDestroy

在实例销毁前调用,但实例还可以用。

这里还可以使用this,一般用来做重置操作,比如清除定时器和DOM监听事件。

destroyed

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

每个周期具体适合哪些场景?
  • beforecreate : 譬如常见的加loading事件。

  • created :在这结束loading,还做一些初始化,实现函数自执行。

  • mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情。

  • beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容。

vue获取数据在哪个周期函数?

一般created/beforeMount/mounted 皆可 正常获取在 created 里面即可,如果涉及到需要页面加载完成之后(DOM操作)的就用 mounted。