vue的生命周期

1.beforeCreate:

在实例初始化之后，进行数据监听和事件/侦听器的配置之前同步调用

从实现效果可以看到Vue的实例已经被初始化出来了，但是上面的数据，方法，事件等还是没有，显示为undefined。

2.created：

在实例创建完后被立即同步调用。在这一步中，实例已完成对选项的处理，意味这一下内容已被配置完毕

数据侦听，计算属性，方法，事件/侦听器的回调函数。然而挂载阶段还没开始

可以看出来数据侦听，计算属性，方法，事件/侦听器的回调函数。然而挂载阶段还没开始，因为页面上还没有显示哦

3.beforeMount：

在挂载开始之前被调用

这个是在开始挂载之前被调用的

4.mounted：

实例被挂载后调用，这是 el 被创建的 vm.$el 替换。

可以看到现在的div#app里面还是空的
如果你希望等整个视图都渲染完毕在执行某些操作，可以在mounted内部使用 vm.$nextTick

可以清楚的看到app里面的所有东西全部被渲染完成才调用

5.beforUpdata：

在数据发生改变后，DOM被更新之前被调用。

6.updated：

在数据更改导致的虚拟DOM重新渲染和更新完毕之后被调用

定义一个方法点击改变data数据

绑定到元素上

现在我们可以看到实现的效果

我们成功的触发了重新渲染虚拟DOM的生命周期函数，但是还存在一个问题就是并不是等全部渲染完才执行的，那么如果想要虚拟DOM全部渲染完成才运行的话，其实也很简单，就是和上面的 mounted 一样使用 vm.$nextTick

7.beforDestroy:

实例销毁之前调用。在这一步，实例仍然完全可用

8.destroyed:

实例销毁后调用。该钩子被调用后，对应Vue实例的所有指令都被解绑

注：

在写这个的时候还是没想到怎么触发这个销毁前后的生命周期函数！

vm.$nextTick( [callback] )：

用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。