生命周期就是一个组件实例化从创建开始,一直到结束,整个过程就是它的生命周期。在生命周期中会涉及到很多的方法,学习生命周期第一可以找到项目中的错误,第二可以满足需求。首先我们来看看生命周期的图示:
生命周期中涉及到的函数在图中都是用红色框框起来的,有beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed,这些都是生命周期中的钩子函数。
① 首先new Vue()是在实例我们当前的vue对象,当你实例vue对象时,在没有创建这个对象之前,你就会拥有beforeCreate方法,此时你可以调用这个方法,它只是对你当前的事件做一些配置,以及对当前data属性中的内容还没有真正的识别,在这个地方就是我们的vue对象还没有诞生的时候,你可以使用这个方法做加载动画。
② 然后就进入到created方法中来,在这个时候vue实例已经创建ok了,属性也成功的被绑定,但是我们的dom并没有生成,因为此时element属性还不存在,通常在这里我们可以获取对应的数据,比如请求网络的接口,把请求的接口赋给我们的属性。当我们实例化对象创建好之后,此时的页面并没有展示出来,它会继续往下走判断当前有没有el属性,如果有,就会继续判断有没有template,或者看有没有$mount("xxx"),如果两者都没有,那当前的生命周期就结束了。如果有el,也有template,就会出现两种情况:第一种情况就是template当中会执行一个具体的组件,第二种情况就是template中有对应的标签。如果两种情况都没有,那生命周期就结束了,因为没有可以渲染的东西,就不会继续往下执行。
③ 假设现在有两种情况中的任意一种,就会进入下一个钩子函数beforeMount,mount是挂载的意思,beforeMount就是开始编译当前的模板了(template中的内容),但是这个方法其实是在虚拟dom中执行的,也就是说你现在还不能看到对应的内容,它只是将你的东西挂载,但还没有挂载上去,没有真实的将你的内容渲染到页面上,之后el指向的元素要把template里的内容放进去,
④ 执行完beforeMount就会接着执行mounted,mounted函数就是模板已经编译完开始挂载了,mounted方法一旦结束,页面就显示出来了。如果你有一些内容希望在页面显示出来后再去操作,那么就要写在mounted方法里。比如你想获取后台数据,那一定是在页面显示后才去获取,此时就可以写在这里。也就是说mounted函数一挂载,dom就生成了,然后就可以看到对应的内容。
⑤ 看到内容后我们还会对当前页面做一些修改,首先是beforeUpdate函数,它是组件在更新之前发生的钩子函数。
⑥ 还有一个就是updated,它是组件已经更新完之后执行的钩子函数,这个方法一旦执行完,你的页面就展示出来了。
⑦ 当前的变化结束后就进入到组件实例化对象生命周期的尾部了,它在销毁之前可以使用beforeDestroy函数,
⑧ 最后就是销毁,destroyed函数。