Vue的生命周期一共有11个,但是在日常工作当中我们使用到的生命周期钩子函数只会使用到八个,而另外三个属于不常用之列,在常用的八个的生命周期中,我们一般会分为四个阶段,四个阶段执行顺序为:创建前后、挂载前后、更新前后和销毁前后。
◉ 创建前后:
beforeCreated(创建前)
创建阶段的第一个生命周期函数,当执行到beforeCreated 钩子函数的时候,当前的vue实例到data数据和methods 方法,都没有初始化完成,因此这个函数对外开放发实际意义不大。
Created(创建后)
创建阶段的第二个生命周期函数,当执行到created生命周期函数的时候,实例的data数据和methods方法,都已经初始化完毕了,可以正常的访问,在项目中,可以在created生命周期里面发送axios请求后台数据。
◉ 挂载前后(载入前后):
beforeMount(挂载前/载入前)
创建阶段的第三个生命周期函数,执行到这个生命周期函数的时候,再此时浏览器中的页面方式的假的页面,并不是真正的带有数据的页面。
Mount(挂载后/载入后)
创建阶段的第四个生命周期函数,代表页面已经完成首次渲染,此时已经把页面上的模版解构,替换到内存中,带有真实数据的页面(初始化的代码一定要写在Mounted()函数中)。
◉ 更新前后:
beforeUpdate(更新前)
将要根据最新的data数据,重新解析所有指令,从而重新渲染到浏览器页面中,这时的data中的数据是最新的数据,但是页面依旧是旧的页面,页面并未和最新的数据同步。
Update(更新后)
此时的页面已经完成更新,这个时候data中的数据和页面都是最新的,已经同步。
◉ 销毁前后:
beforeDestory(销毁前)
当执行该生命周期函数的时候,实例身上所有的data,所有的methods以及过滤器…等都处于可用状态,并没有真正执行销毁。
destroyed(销毁后)
Vue实例销毁后调用Vue实例指令的所有东西都会接触绑定,所有事件都会被移除,所有的子实例也会被销毁,此时组件以及被完全销毁,实例中的所有的数据、方法、属性、过滤器…等都已经不可用了。
不常用的三个生命周期分别activated、deactivated、errorCaptured。
activated(组件激活时)
和beforeDestroy与destroyed用法差不多,但是如果我们需要一个实例,在销毁后再次出现的话,用 beforeDestroy和destroyed的话,就太浪费性能了。实例被激活时使用,用于重复激活一个实例的时候,keep-alive 组件激活时调用,该钩子函数在服务器渲染期间不被调用。
deactivated(组件未激活时)
实例没有被激活时。keep -alive 组件停用时调用,该钩子函数子在服务器渲染期间不会调用。
errorCaptured(错误调用)
当捕获一个来自子孙后代组件的错误时被调用,有三个参数:错误对象,发生错误的组件实例以及一个包含错误来源信息的字符串.此钩子可以返回false以阻止该错误继续向上传播。