Vue生命周期函数

生命周期函数：
　　组件挂载，以及组件更新，组建销毁的时候出发的一系列方法。
　　beforeCreate：实例创建之前
　　created：实例创建完成
　　beforeMount：模板编译之前
　　mounted：模板编译完成。请求数据，操作dom放在这
　　beforeUpdate：数据更新之前
　　updated：数据更新完毕
　　beforeDestory：实例销毁之前。页面销毁的时候保存一些数据
　　destoryed：实例销毁完成

示例代码：

App.vue

<template>
  <div id="app">
    <v-home v-if="flag"></v-home>
    <button @click="flag=!flag">更改v-home展示</button>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
export default {
  name: "app",
  data() {
    return {
      flag: true
    };
  },
  components: {
    "v-home": Home
  }
};
</script>

<style lang="scss">
</style>

components/Home.vue

<template>
<div>
    {{title}}
    <input v-model="title"/>
</div>
</template>
<script>
export default {
  data() {
    return {
      title: "我是Home组件"
    };
  },
  beforeCreate() {
    console.log("实例创建之前");
  },
  created() {
    console.log("实例创建完成");
  },
  beforeMount() {
    console.log("模板编译之前");
  },
  mounted() {
    console.log("模板编译完成");
  },
  beforeUpdate() {
    console.log("数据更新之前");
  },
  updated() {
    console.log("数据更新完毕");
  },
  beforeDestroy() {
    console.log("实例销毁之前");
  },
  destroyed() {
    console.log("实例销毁完成");
  }
};
</script>
<style>
</style>