vue2.0实例的生命周期

不多Bb先来看官网生命周期图示

假如觉得上图很复杂来看这张简单的

这就是生命周期的8个阶段其中用的最多的就是created（成功创建）阶段了，比如很多小伙伴喜欢在这里进行Ajax请求。

下面我们11来看实例中的钩子上代码

1.beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

var vm = new Vue({
    el:'#app',
        data:{
            name:'凯GG'
        },
    beforeCreate(){
            console.log('创建之前');
            console.log(this.$el); //undefined
            console.log(this.$data) //undefined
        },
  })

看结果：

beforeCreate

数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象

2.create
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

  var vm = new Vue({
    el:'#app',
      data:{
        name:'凯GG'
      },
      created() {
        console.log('成功创建');
        console.log(this.$el);  //undefined
        console.log(this.$data) // 初始化完成
      }
  })

看结果：

create

数据已经绑定到了对象实例，但是还没有挂载对象

3.beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。

var vm = new Vue({
    el:'#app',
    data:{
        name:'凯GG'
    },
    beforeMount() {
        console.log('即将挂载');
        console.log(this.$el);  //挂载完成
        console.log(this.$data) // 初始化完成
    }
})

看结果：

beforeMount

模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性，$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

4.mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内。

var vm = new Vue({
    el:'#app',
    data:{
        name:'凯GG'
    },
    mounted() {
        console.log('成功挂载');
        console.log(this.$el); 
        console.log(this.$data)
    }
})

看结果：

mounted

将$el的内容挂载到了el，相当于我们在jquery执行了$(el).html($el),生成页面上真正的dom，上面我们就会发现dom的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作

5.beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

    <div id="app">
        <div id="box">{{ name }}</div>
        <input type="button" value="数据更新" @click="beforeUpdate">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name:'凯GG'
            },
            beforeUpdate() {
                console.log(this.name)
                console.log(document.getElementById('box').innerHTML)
            },
            methods:{
                beforeUpdate(){
                    this.name = '数据更新'
                }
            },
        })
    </script>

看结果：

beforeUpdate

数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变

6.updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher取而代之。

<div id="app">
        <div id="box">{{ name }}</div>
        <input type="button" value="数据更新" @click="beforeUpdate">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name:'凯GG'
            },
            updated() {
                console.log(this.name)
                console.log(document.getElementById('box').innerHTML)
            },
            methods:{
                beforeUpdate(){
                    this.name = '数据更新'
                }
            },
        })
    </script>

看结果：

updated

dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新

7.beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
8.destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

    <div id="app">
        <div id="box">{{ name }}</div>
        <input type="button" value="销毁实例" @click="beforeUpdate">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                name:'凯GG'
            },
            beforeDestroy() {
                console.log(this.$el)
                console.log(this.$data)
            },
            destroyed() {
                console.log(this.$el)
                console.log(this.$data)
            },
            methods:{
                beforeUpdate(){
                    vm.$destroy()
                }
            },
        })
    </script>

看结果：

beforeDestroy，destroyed

beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动