vue生命周期

总览

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>