Vueライフサイクルの8つのフック機能

メソッド名	意味
beforeCreate	データが初期化される前に呼び出されます。現時点では、データとメソッドにはデータがありません。
作成した	データの初期化後に呼び出されます。この時点で、データとメソッドには対応するデータがあります。
beforeMount	ページがレンダリングされていない場合、つまりVueデータがページに送信されていない場合に使用されます。
マウント	ページがレンダリングされた後、つまり、この時点でページがVueのデータを完全に取り出した後に使用します。
beforeUpdate	データが更新される前。
更新しました	データデータの更新。
beforeDestroy	コンポーネントが破壊される前。
破壊されました	コンポーネントが破棄された後。

demo.vueコード

<template>
  <div id="app">
    {
    
    {
    
    msg}}
    <button @click="dochange()">Change Content</button>
  </div>
</template>
<script>

export default {
    
    
  data(){
    
    
    return {
    
    
      msg:"hello"
    }
  },mounted(){
    
    
    console.log("this is my demo ....");
  },beforeCreate(){
    
    
    console.log("before created");
  },created(){
    
    
    console.log("created");
  },beforeMount(){
    
    
    console.log("before mount");
  },mounted(){
    
    
    console.log("mounted");
  },beforeUpdate(){
    
    //当数据发生改变得时候
    console.log("before update");
  },updated(){
    
    //当数据发生改变得时候
    console.log("updated");
  },beforeDestroy(){
    
    
    console.log("before destroy");
  },destroyed(){
    
    
    console.log("destroyed");
  },methods:{
    
    
    dochange(){
    
    
      this.msg="world";
      console.log("change...");
    }
  }
}
</script>