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('销毁成功');
 },
 //
 actived(){
   //keep-alive组件被激活的时候调用
 },
 //
 deactivated(){
   //keep-alive 组件停用时调用
 }
});