vue生命周期函数详解

vue生命周期：
「创建期间的生命周期函数：」
1.1 beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性。
也就是说，如果这个时候要使用data或者是methods会在控制台报错。

1.2 created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。
也就是说;这里从描述中可以知道以下几点：

处理data中的参数，例如：变更、修改、读取等等
处理methods中的方法，例如：执行方法
不能处理模板中的内容，例如：无法打印参数在模板中的渲染结果，就是如果写一个插值表达式{{ msg }}，那么可以看看会不会被打印出值来。(当然报错！模板未被渲染。)

1.3 beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中。

此时已经完成了模板的编译，但是还没有挂载到页面中，编辑的内容存储在内存中。
也就是说还未渲染到浏览器，此时控制台只会有插值表达式{{mesage}}之类的。

1.4 mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。
也就是说：此时已经将编译好的模板，挂载到了页面指定的容器中显示。那么现在上一个示例中打印页面的插值表达式，应该是能够打印出渲染后的值了，正常显示渲染浏览器的值。

「运行期间的生命周期函数：」

2.1 beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点。
也就是说，在控制台看到的是新的值，但是界面还未更改。

2.2 updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
也就是说，在控制台看到的是新的值，界面也更改为新值。

「销毁期间的生命周期函数：」

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

3.2 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。