vue生命周期（记录）

vue生命周期（创建、挂载、更新、销毁 ）

 let app = new Vue({
      el:"#app",
        data:{
         name:"demo"
      },
      //此阶段为实例初始化之后，此时的数据观察和事件配置都没好准备好。
      //所以数据data和挂载元素el为undefined
      beforeCreate(){
         console.log('即将创建');
         console.log(this.$data);
         console.log(this.$el);
      },
      //此时能获取到data值，但DOM还没有生成，不能获取挂载元素el
      created(){
        console.log('创建完毕');
        console.log(this.$data);
        console.log(this.$el);
     },
     //此时DOM已经生成，但并没有渲染data中的数据
      beforeMount(){
        console.log('即将挂载');
        console.log(this.$el);
     },
     //挂在完毕，data中的数据被成功渲染
      mounted(){
        console.log('挂载完毕');
        console.log(this.$el);
     },
     //更新渲染视图之前
     //当我们修改了数据的时候触发，但此阶段视图并未重新渲染更新
      beforeUpdate(){
      console.log('=即将更新渲染=');
      let name = this.$refs.app.innerHTML;
      console.log('name:'+name);
     },
     //更新渲染视图之后
     //此阶段读取视图上的内容，已经是更新后的内容
      updated(){
      console.log('==更新成功==');
      let name = this.$refs.app.innerHTML;
      console.log('name:'+name);
     },
     //调用实例的destroy( )方法可以销毁当前的组件
     //在销毁前，会触发beforeDestroy钩子。
      beforeDestroy(){
       console.log('销毁之前');
     },
     //成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，它与视图之间也被解绑。
     destroyed(){
       console.log('销毁成功');
     },
     //
     activated(){
       //keep-alive组件被激活的时候调用
     },
     //
     deactivated(){
       //keep-alive 组件停用时调用
     }
    });