Vue生命周期中的钩子函数

VUE中生命周期的钩子函数

一、VUE诞生的过程:

• beforeCreated方法：

  • 实例vue对象 new Vue() 这个时候是没有创建出来我们的vue的对象，这个时候，只有我们的一些事件，一些data之类里边的东西，还有有真正的去识别我们对象中的东西。

• created方法：

  • 这个时候，我们的组件已经成功的创建完毕，属性也被成功的绑定，但是我们的DOM这个时候还没有完全的形成。

  • 在这个时候，我们就可以在这个里边请求网络的接口，赋值等的操作。

• 这时候会进行判断：

  • 有没有我们的element元素，或者.$mount('#app')的检查

  • 如果这两者都没有，那么当前的生命周期就会结束了

  • 有其中任意一个的话会进行检查template的这个属性是否存在

  • 如果有template的或者其他可以渲染的东西的话，就会 使用render这个方法来进行渲染

  • 如果以上两个都没有，那么当前的生命周期也就会结束了

• beforeMount方法：

  • 这个方法是在我们的虚拟DOM中去执行，这个时候是将我们的DOM树进行渲染，但是还没有真正的挂载在我么的真实的DOM的结构上边去。

  • 执行完这个钩子函数之后，会将我们渲染出来的DOM树进行编译，也就是将虚拟DOM树中的东西编译看看有没有错误

• mounted方法：

  • 这个函数执行的时候，就是将我们的虚拟DOM里边的东西准备好进行挂载，在这个钩子函数执行结束之后，我们的页面就会显示出来渲染好的DOM树了我们可以看到了页面。

  • 也就是如果想在页面显示出来之后进行的一些操作，这个时候就要写在mounted的这个方法里边

• beforeUpdate方法：

  • 当前组件在更改之前需要调用的一个钩子函数

• updated方法：

  • 这个方法也就是当前页面已经更新完毕之后的钩子函数

• beforeDestory方法：

  • 组件销毁之前的钩子函数

• destoryed方法：

  • 对象销毁之后的钩子函数

 

• 该vue实例对象被销毁

 

二、钩子函数的理解：

在一个vue实例对象的实例到销毁的过程中，会伴随着很多的事件，数据的挂载，DOM树的渲染，数据的增删改查等，伴随着每一个事件的前后，都会有对应的钩子函数来对应相应的事件。这样一来我们就可以根据不同类型的需求来索引不同类型的钩子函数，进而实现我们的需求。