9.ライフサイクル機能

また、ライフサイクルフック手段と呼ばれるライフサイクル機能は、構成要素と同様の構成要素がトリガ破壊する方法の範囲を搭載します。

 コンポーネントディレクトリに新しいLife.vueコンポーネントは、ライフサイクルの機能を実証するために使用されます

< テンプレート> 
    < divの> 
        < H2 > {{MSG}} </ H2 > 
        
    </ DIV > 
</ テンプレート> 
< スクリプト> 
エクスポートデフォルト{ 
  名：' ライフ' 、   
  データ（）{ 
    リターン{ 
        MSG：「ライフサイクルメソッドデモ' 
    } 
  }、
  メソッド：{}、
  beforeCreate（）{ 
      にconsole.log（' インスタンスを作成する前に' ）
  }、 
  作成（）{
      コンソール。ログ（ ' インスタンスが（作成背景からデータを取得するために使用される。）されている' ）
  }、
  beforeMount（）{ 
      にconsole.log（' の前にテンプレートコンパイラ' ）
  }、
  {）（マウント
      はconsole.log（' テンプレートコンパイル' ）
  }、
  のBeforeUpdate（）{ 
      にconsole.log（' 前のデータの更新に' ）
  }、
  更新（）{ 
      にconsole.log（' データが更新' ）
  }、
  beforeDestroy（）{ 
      にconsole.log（' 前述の例破壊' ）
  }、
  破壊（）{
      console.log（' 完全な破壊として' ）
  } 
  
} 
</ スクリプト> 
< スタイルのlang = "SCSS" スコープ> 
H2 { 
    色：緑。
} 
</ スタイル>

Home.vueコンポーネントで引用

< テンプレート> 
    < divの> 
        < H2 >これは、コンポーネントのホームである</ H2 > 
        < ボタン@click = "RUN" >ポップアッププロンプトのコンポーネントホーム</ ボタン> 
        < V-ライフV-IF = "旗" > </ V -Life > 
        < BR > 
        < ボタン@click = "GUA（）" >マウントアセンブリの例は、アンインストール</ ボタン> 
    </ DIV > 
</ テンプレート> 
<スクリプト> 
からの輸入ライフ' ./Life.vue ' ; 
輸出のデフォルト{ 
  名：' ホーム' 、   
  データ（）{ 
    リターン{ 
        MSG：' 首页组件' 、
        フラグ：真
    } 
  }、
  メソッド：{ 
    ラン（）{ 
        警告（これは.msg）
    }、
    GUA（）{ 
      この.flag =！この.flag 
    } 
  }、
  コンポーネント：{ 
    ' V期' ：生命
  } 

} 
</スクリプト> 
< スタイルのlang = "SCSS" スコープ> 
H2 { 
    色：赤。
} 
</ スタイル>