vue生命周期示例摘要

通过实例分析了虚拟企业的生命周期。分享给大家参考，如下：

每个Vue实例都有一个完整的生命周期，经历了创建、初始化数据、编译模板、挂载Dom、渲染更新渲染、销毁等一系列过程。如下图所示

挂钩功能

vue的完整生命周期可以分为三个阶段：初始化阶段、运行阶段和销毁阶段。有许多钩子函数，它们在vue生命周期的不同阶段运行，如下所示：

在安装前创建在安装前安装在更新前更新在销毁前销毁挂钩功能描述

BeforeCreate通过新的vue()创建一个vue实例，Vue的生命周期开始了。首先，将执行beforeCreate钩子函数。此时vue实例只是一个空壳，dom元素还没有挂载，所以数据和真实的DOM都无法访问，一般不会执行任何操作。

此时，已创建的已经可以使用数据或更改数据。在此处更改数据不会触发更新的函数和其他挂钩函数。一般在这里可以得到初始数据。

在这个函数中，虚拟dom已经创建好了(很快就会呈现出来)，数据可以在这里更改而不会触发更新。在这里，您可以在不触发其他钩子函数的情况下，在装载渲染之前最后一次更改数据。

挂载当这个函数被调用的时候，组件已经出现在页面上，数据和真实的dom已经被处理，事件已经挂载，所以你可以在这里操作真实的dom等东西。

BeforeUpdate当组件或实例的数据发生变化时，将立即执行beforeUpdate，然后vue的虚拟dom机制将重建虚拟dom，并使用diff算法将其与之前的虚拟dom树进行比较，然后再次渲染。

更新完成时更新，执行更新，数据已更改，dom已重新渲染，可以操作更新后的虚拟dom。

BeforeDestroy当以某种方式调用$destroy方法时，立即执行beforeDestroy函数来做一些善后工作，例如清除计时器和非指令绑定事件。

在被销毁的组件的数据绑定和监控被移除后，只剩下dom shell了，此时执行销毁。当然，以上操作也可以在这里完成。

vue的生命周期：从诞生到加载再到毁灭，有一个完整的生命周期过程，它允许我们在不同的时间写不同的代码，做不同的事情

钩子函数：是不同生命周期vue暴露给我们的回调函数

示例：

Varvn=newvue ({el: '。box '，data: {msg:' h1呵呵/h1'}，在create3360 function () {alert('即将创建实例，性能即将启动')之前；}，create d : function(){ alert(' vue实例是新的，方法和属性尚未编译')；}，before mount : function(){ alert(' vue实例已创建，内部属性和方法即将编译')；}，mounted:function() {alert('对象和属性已编译')；}，在更新：函数之前(){alert('立即更新数据，未保存则保存')；}，updated:function() {alert('数据已更新')；}，在销毁：函数(){alert ('vue实例已结束')之前；}，毁了：函数(){alert ('vue实例将永远活在我们心中！');}})希望这篇文章对大家的vue.js编程有所帮助。