vue生命周期详解

准备工作

vue生命周期的帖子网上已经一大片，这里通过代码的形式体验一下vue每一个阶段所发生的事
基础代码如下：

 <div id="root">
        <span>{{n}}</span>
        <button @click="n++">点击</button>
    </div>
    <script>
        new Vue({
        el:'#root',
        data:{
            n:1
        }
        })
    </script>

很简单的vue界面，点击按钮，span元素内容自增

生命周期流程

beforeCreate

这个阶段发生在vue初始化之时，这时候vue初始化生命周期、还没有完成数据代理，因此无法通过vm访问到data中的数据以及methods中的方法.
在实例中添加这个钩子函数

beforeCreate(){
            console.log("beforeCreate")
            console.log(this)
            debugger;
        }

可以看到此时页面没有渲染,vue实例中没有数据代理和数据绑定

created

beforeCreate之后，vue开始进行数据检测，完成数据代理，之后就是create钩子所在的阶段，这时候就可以通过vue访问到data中的数据，创建该钩子进行测试

 created(){
            console.log("created")
            console.log(this)
            debugger
        }

可以看到此时页面还没有被渲染，但是实例中已经能访问到绑定的数据

接下来，vue开始根据el属性绑定的html解析模板，然后生成虚拟dom,并把虚拟dom作为属性添加到实例中，但此时页面还不能显示解析好的内容。

beforeMount

此时的vue已经准备好虚拟dom,但还没有开始渲染界面，此时即使操作了dom，最终也是没有效果，因为后期vue渲染会重新将dom渲染回去.

  beforeMount(){
            console.log("beforeMount")
            console.log(this)
            debugger
        }

在控制台中操作dom，页面发生变化

释放断点，vue继续运行，dom重新被覆盖，之前操作无效果

mounted

beforeMount之后，vue开始根据虚拟dom渲染html,此时vue初始化结束，一般在此时可以进行网络请求，绑定事件、订阅消息等操作，这也是很常用的一个钩子。

beforeUpdate

数据更新伴随的是页面重新渲染，但是在这个阶段，数据会更新，但是页面还没有完成渲染

 beforeUpdate(){
           console.log("beforeUpdate")
           debugger 
        }

点击按钮，n数值+1,但页面中还是1

updated

此时完成虚拟dom的对比，渲染页面

beforeDestroy

此时vue的实例还发挥作用，但开始准备销毁工作，此时再对数据进行改变，不会发生渲染，因为不会走updated

destroyed

vue销毁，实例不会发生作用