vue生命周期

主要任务：

beforeCreate —组件实例化之前执行 —一般加载动画

created —组件实例化之后，但页面未显示 —一般获取接口数据，结束动画加载

brforeMount —组件挂载之前，页面未显示，虚拟Dom已经配置，编译el，template

mounted —组件挂载完毕，此方法执行后，页面显示，数据和template结合

beforeUpdate —组件更新前，页面未更新，虚拟Dom配置完成

updated —组件更新完毕，此方法执行后，页面改变

brforeDestory —组件销毁前

destory —组件销毁

代码
App.vue

<template>
  <div id="app">
    <p v-on:changeTitle="updateTitle">{{title}}</p>
    
  </div>
</template>
 
<script>
 
  export default {
 
    data(){
      return {
        title:"未改变之前",
        new_title:'改变后'
      }
    },
    methods:{
      updateTitle:function(){
        this.title = new_title
      }
    },
    components:{
 
    },
    beforeCreate:function(){
      alert("组件实例化之前执行");
    },
    created:function(){
      alert("组件实例化之后，但页面未显示");
    },
    brforeMount:function(){
      alert("组件挂载之前，页面未显示，虚拟Dom已经配置");
    },
    mounted:function(){
      alert("组件挂载完毕，此方法执行后，页面显示");
    },
    beforeUpdate:function(){
      alert("组件更新前，页面未更新，虚拟Dom配置完成");
    },
    updated:function(){
      alert("组件更新完毕，此方法执行后，页面改变");
    },
    brforeDestory:function(){
      alert("组件销毁前");
    },
    destory:function(){
      alert("组件销毁");
    }
  }
 
</script>
 
<style scoped>
  h1{
    color:red;
  }
</style>