Vue生命周期

重新认识一下，Vue整个的生命周期，无论学什么框架，都需要了解整个的生命周期，这对于我们的开发是十分重
要的，让我们知道，什么时候可以做什么事

1.new Vue()

我们的整个Vue应用都是从这里开始的，在这里我们可以选择初始化参数，可以配置相应的路由，可以决定我们在
    哪个DOM元素上来初始化我们的应用，一个Vue项目就从这里开始，我们将通过几个方法来认识一下Vue

2.beforeCreate

此时的组件实例刚被创建，我们赋予组件的初始数据，data还没有运行，具体有哪些应用场景，这个才是我关
心的问题，我们以前写JQuery的时候会有这样的一段代码，用来判断是否页面加载完毕，举个栗子：

$(function(){ alert('页面加载完毕')})
    那么换成Vue了，beforeCreate就做了同样的事情

2.created

此时的组件实例刚被创建完成，组件实例中的属性已经计算完毕，但是DOM还未生成，这个时候就是我们的
create函数所处的阶段，那么此时，我们可以做什么呢，举个栗子：

我们的页面经常需要从后台获取数据，我们会给我们的组件赋一些初始值，等到后续数据载入后替换，那就是这里了
    created(){ setTimeOut(function(){this.initData = { name:1, value:2 }})}

3.beforeMount

此时的组件实例刚被创建完成，组件实例中的属性已经计算完毕，DOM已经首次生成，但是还没有挂载到具体的
DOM,这个时候就是我们的beforeMount函数所处的阶段，那么此时，我们可以做什么呢，举个栗子：

此时Vue的根DOM元素已经被初始化，在这里，我们拿到我们的虚拟DOM，虽然现在看起来像是占位符
    beforeMount(){
        console.log(this.$el); // <div id="root">{{hello}}</div>
    }

4.mounted

此时的组件实例刚被创建完成，组件实例中的属性已经计算完毕，DOM已经首次生成，已经挂载到具体的DOM,
这个时候就是我们的mounted函数所处的阶段，需要注意的一点就是，不一定所有的子组件都也都一起被挂载
那么此时，我们可以做什么呢，举个栗子：

此时Vue的根DOM元素已经被初始化，在这里，我们可以拿到真实的DOM
    mounted(){
        console.log(this.$el); // <div id="root">你好</div>
    }

5.beforeUpdate

此时的组件实例刚被创建完成，组件实例中的属性已经计算完毕，DOM已经首次生成，已经挂载到具体的DOM,
在此之后我们的数据发生了变化，有变化还没有及时重新渲染之前，这个时候就是我们的beforeUpdate函数

6.updated

此时的组件实例刚被创建完成，组件实例中的属性已经计算完毕，DOM已经首次生成，已经挂载到具体的DOM,
在此之后我们的数据发生了变化，DOM已经重新渲染之后，这个时候就是我们的updated函数调用的触发点
那么此时，我们可以做什么呢，举个栗子：

我们的页面有这样一个滚动视窗，我们需要知道初始化之后的一个按钮的展示位置，如果超过了某一个height
那么动态的计算展示窗体的宽高，此时可以封装在这里
updated(){ this.computeHeight()}

7.activated

在第二节中，我们提到了一个内置组件keep-alive,当此组件被激活的时候，会调用改方法

8.deactivated

keep-alive组件被停用的时候，会调用改方法

9.beforeDestroy

此时的组件实例还未被销毁，我们可以利用组件的当前实例做一些操作

10.destroyed

销毁整个Vue实例，回收所有的资源