Vue生命周期演示
一、Vue实例创建阶段的生命周期函数（特点：每个实例一辈子只执行一次）
beforeCreate()：这是我们遇到的第一个生命周期函数。表示实例完全被创建出来之前，会执行它。
注意：在beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有被初始化。
created(): （重要）这是遇到的第二个生命周期函数， 在created 中， data 和 methods 都已经被初始化好了。如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作。
beforeMount():这是遇到的第三个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到 页面中。
在 beforeMount 执行的时候，页面中的元素，话没有被真正的替换过来，只是之前写的一些模板字符串。
mounted():（重要）这是遇到的第四个生命周期函数，表示，内存中的模板已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。用来初始化第三方的UI插件
注意：mounted实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其他的操作的话，这个实例，就静静的 躺在我们的内存中一动不动。
二、Vue实例运行阶段的生命周期函数（特点：按需被调用至少 0 次 ，最多N次）
when data changes:当Vue实例中data数据改变时候
beforeUpdate():当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和 最新的数据保持同步
updated():updated事件执行的时候，页面和data 数据已经保持同步了，都是最新的
三、Vue实例销毁期间的生命周期函数：(特点：每个实例一辈子只执行一次)
beforeDestroy:销毁之前，实例还正常可用
destroyed:销毁之后，实例已经不工作了
Vue实例-->[编译]-->模板字符串-->[渲染]-->虚拟内存中的DOM-->[挂载]-->真正的浏览器（浏览器DOM）
页面上DOM节点的一些操作一定要在Vue实例已经渲染到真正的浏览器了才能进行 操作。在内存中的虚拟DOM操作不了
