Vue生命周期

 生命周期是指从创建到销毁的过程，每个.vue文件都存在一套生命周期，只有vue组件存在生命周期

周期名称	data	computed	methods	$refs
beaforeCreate	否	否	否	否
created	是	是	是	否
beforeMount	是	是	是	否
mounted	是	是	是	是

<template>
  <input typle="button" value="修改msg" @click="show" >
  <h3 id="h3" v-if="msg">
    {{msg}}
  </h3>
</template>

一、beforeCreate（创建前）

·        此阶段为组件实例初始化完成之后立即调用，此时的数据观察和事件机制都为形成，不能获得DOM节点

        （会在实例初始化完成、props解析之后、data()和computed等选项处理之前立即调用）

export default{
    data(){
      return{
        msg:"1"
      }
    },
    methods:{
      show(){
        this.msg=!this.msg,
        console.log(this.msg)
      }
    },
    beforeCreate(){
      console.log("创建前");
      console.log(this.msg);
      console.log(document.getElementById('h3'))
    },
}

二、create（创建后）

        在组件实例处理完所有与状态相关的选项后调用，vue实例已经创建，仍然不能获取DOM元素

  export default{
    data(){
      return{
        msg:"1"
      }
    },
    methods:{
      show(){
        this.msg=!this.msg,
        console.log(this.msg)
        console.log("执行了show方法")
      }
    },
    beforeCreate(){
      console.log("创建前");
      console.log(this.msg);
      console.log(document.getElementById('h3'))
    },
    created(){
      console.log("创建后");
      console.log(this.msg);
      console.log(document.getElementById('h3'))
    },
  }

三、beforeMount（载入前）

        在组件被挂载之前调用，组件已经完成了响应式状态的设置，但还没有创建DOM节点

        （即将挂载的一瞬间执行）

    beforeCreate(){
      console.log("创建前");
      console.log(this.msg);
      console.log(document.getElementById('h3'))
    },
    created(){
      console.log("创建后");
      console.log(this.msg);
      console.log(document.getElementById('h3'))
    },
    beforeMount(){
      console.log("重建前");
      console.log(this.msg)
      console.log(document.getElementById('h3'))
    },

四、mounted（载入后）

        在组件被挂载之后调用，数据和DOM都已经被渲染出来了

    beforeCreate(){
      console.log("创建前");
      console.log(this.msg);
      console.log(document.getElementById('h3'))
    },
    created(){
      console.log("创建后");
      console.log(this.msg);
      console.log(document.getElementById('h3'))
    },
    beforeMount(){
      console.log("重建前");
      console.log(this.msg)
      console.log(document.getElementById('h3'))
    },
    mounted(){
      console.log("重建后");
      console.log(this.msg)
      console.log(document.getElementById('h3'))
    },

页面只会显示创建和重建的效果

 

五、beforeUpdate（更新前）

        在组件即将因为一个响应式状态变更而更新其DOM树之前被调用

beforeUpdate(){
      console.log("更新前");
      console.log(this.msg)
      console.log(document.getElementById('h3'))
    },

六、updated（更新后）

        在组件因为一个响应式状态变更而更新其DOM树之后调用

    updated(){
      console.log("更新后");
      console.log(this.msg)
      console.log(document.getElementById('h3'))
    },

 

更新后页面显示为null是因为v-if=false卸载了h3元素（v-if用来判断卸载和重构元素及其指令或组件）

七、beforUnmount（卸载前）

        在一个组件实例被卸载之前调用，组件实例保有全部的功能

八、unmounted（卸载后）

        在一个组件实例被卸载之后调用