Vueインスタンスのライフサイクル

5465 ワード
先端
一、ライフサイクル
VueアプリケーションはすべてVueインスタンス(ViewModel)によって完成され、Vue作成インスタンスには一連の初期化動作が必要であり、データの傍受、テンプレートのコンパイル、インスタンスをDOMにマウントし、データの変化時にDOMを更新するなどの設定が必要である.もちろん、インスタンスの作成はライフサイクルの一部にすぎません.
Vueオブジェクト宣言サイクルの各フェーズでは、ライフサイクルというフック関数が実行されます.対応するフック関数には、特定の機能を達成するために独自のコードを追加できます.
フック関数:
  • beforeCreate:Vueインスタンスの初期化後に実行するが、このときVueインスタンスデータとelデータはいずれも空の
    • である.
  • created:Vueインスタンスのデータはバインドされているが、elは空の
    • である.
  • beforeMount:elのマウント前に
    • を実行する.
  • mounted:この時点でelは既に指定されたDOMノード
    • にマウントする.
  • beforeUpdate:Vueインスタンスデータの更新後に実行するが、ページ内のデータは
    • を更新していない.
  • updated:ページデータ更新後に
    • を実行する.
  • beforeDestroy:Vueインスタンス破棄前に
    • を実行する.
  • destroyed:インスタンス破棄後
    • を実行する.
    二、コードプレゼンテーション
    Vueオブジェクトのライフサイクルを対応するフック関数で説明し、次のコードをコピーしてコンソールで実行結果を観察できます.
    HTMLコード
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue  _    title>
head>
<body>
<div id="test">
    <p>    ：{{count}}p>
    <button @click="destroyVue">destory vuebutton>
div>
body>
html>

    Vue.jsコード
    
<script type="text/javascript" src="../js/vue.js">script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            count: 0
        },

        beforeCreate() {
            console.log('beforeCreate()')
        },

        created() {
            console.log('created()')
        },

        beforeMount() {
            console.log('beforeMount()')
        },

        //              ，         'Hello Vue.js'
        mounted() {
            console.log('mounted()')
            this.intervalId = setInterval(() => {
                //    'count',   beforeUpdate()   updsted()
                this.count ++
            }, 1000)
        },

         beforeUpdate() {
            console.log('beforeUpdate() ' + this.count)
        },

        updated () {
            console.log('updated() ' + this.count)
        },

        //        ，      
        beforeDestroy() {
            console.log('beforeDestroy()')
            clearInterval(this.intervalId)
        },

        destroyed() {
            console.log('destroyed()')
        },

        //          ：     Vue   
        methods: {
            destroyVue () {
                this.$destroy()
            }
        }
    })

script>

    PS:よく使うフック関数:
  • mounted():ajax要求の送信、タイミングタスクの起動等
    • .
  • beforeDestory():タイミングタスクなどの
    • をクリアするための終了作業を行う.
    vue紹介
    uid/gid関連で便利なコマンド