Vue 生命周期

生命周期，就如同一个软件的使用，下载，安装，打开，使用，卸载，清理  

vue中于是也有相对应的 生命周期选项  生命周期选项 | Vue.js (vuejs.org)​​​​

​​​​​​​

---

代码演示：

<APP.VUE>

<template>
  <h2>{{ message }}--{{ counter }}</h2>
  <button @click="message ='hi'">修改message</button>
  <button @click="counter++">+1</button>

  <div>
    <button @click="isShowHome = !isShowHome">是否显示home</button>
    <home v-if="isShowHome"></home>
  </div>
</template>

<script>
import Home from "./Home.vue"

export default {
    components:{
        Home,
    },
    data(){
        return{
          message:"hello",
          counter:0,
          isShowHome:true
        }
    },

  //1.组件被创建之前
  beforeCreate(){
    console.log("beforeCreate")
  },
  //2.组件被创建完成
  created(){
    console.log("created")
    console.log("1.发送网络请示，请求数据")
    console.log("2.监听eventBus事件")
    console.log("3.监听watch数据")
  },
  //3.组件的template准备被挂载
  beforeMount(){
    console.log("beforeMount")
  },
  //4.组件template被挂载 ： 虚拟DOM->真实DOM
  mounted(){
    console.log("mounted")
    console.log("1.获取DOM")
    console.log("2.使用DOM")
  },
  //5.1数据发生改变,准备更新DOM（数据已改）
  beforeUpdate(){
    console.log("beforeUpdate")
  },
  //5.2更新DOM
  updated(){
    console.log("updated")
  },
  //6表示准备卸载DOM->元素
  //6.1先回调
  beforeUnmount(){
    console.log("beforeUnmount")
  },
  //6.2DOM元素被卸载完成
  unmounted(){
    console.log("unmounted")
  }
}
</script>

<style>

</style>

<Home.vue>

<template>
   <h2>home</h2>
</template>

<script>
export default {
   beforeUnmount(){
      console.log("home beforeUnmount")
   },
   unmounted(){
      console.log("home unmounted")
   }
}
</script>

<style>

</style>

---