vue生命周期的理解

1、即将创建：对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成。

此时，实例中的data和el都是undefined。因此，在beforeCreate钩子函数中不能使用data中的数据，也不能获得DOM节点。

2、创建完毕：对应的钩子函数为created。在这个阶段vue实例已经创建，我们在同样打印一下data和DOM元素。

此时，我们能够读取到数据data的值，但是DOM还没有生成，所以和DOM相关的属性还不存在，自然也就不能获取DOM元素。

3、即将挂载：对应的钩子函数是beforemount。

能够读取到数据data的值，DOM生成。但是模板数据还没有进行渲染。还是原始{{name}}的状态。

4、渲染完毕：对应的钩子函数是mounted。

mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

5、即将更新渲染：对应的钩子函数是beforeUpdate。

beforeUpdate函数在数据更新后并没立即更新data里的数据，但是DOM中的数据已经改变，页面上更新显示了。

6、更新渲染后：对应的钩子函数是updated。

现在data中的数据终于和我们更改过的内容同步了！

7、销毁之前：对应的钩子函数是beforeDestroy。

上一步vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。比如，清除定时器。

8、销毁之后：对应的钩子函数是destroyed。

调用destroy前，我们改变name,在视图随之改变，beforeDestroy获取的DOM和我们更新后的结果一致。调用destroy后，我们改变name，视图不会改变，destroyed也不会获取到DOM信息了。
销毁之前，修改name的值，可以成功修改视图显示的内容为更新后的内容，调用实例的$destroy( )方法之后，vue实例与DOM的关系解绑，vue数据的任何变化都不会使DOM更新，说明实例成功被销毁了