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

Vueインスタンスのライフサイクルフック
このブログの著作権は本人と饥人谷の所有で、転载はソースVueフレームワークの入り口がVueの実例であることを说明しなければならなくて、実はフレームワークの中のview modelで、それはページの中の业务の処理のロジック、データモデルなどを含んで、そのライフサイクルの中で多くの事件のフックがあって、私达に全体のVueの実例の过程を制御する时更に良いロジックを形成しやすいようにします.
Vueインスタンス
ドキュメントでは、vmという変数名を使用してVueインスタンスを表すことがよくあります.Vueをインスタンス化する場合は、データ(data)、テンプレート(template)、マウント要素(el)、メソッド(methods)、ライフサイクルフック(lifecyclehook)などのオプションを含むオプションオブジェクトを入力する必要があります.
Vueインスタンス化のオプション
これを含む関数の多くは矢印関数を使用しないでください.これはVueインスタンスを指すことを望んでいるからです.
data
Vueインスタンスのデータはすべてdataオブジェクトに保存され、Vueはdataの属性をgetter/setterに再帰的に変換し、dataの属性がデータの変化に応答できるようにします.

var data = { a: 1 }
//         
var vm = new Vue({
  data: data
})
vm.a // -> 1
vm.$data === data // -> true

このようにデータはHTMLにバインドされ、Vueフレームワークはdataのデータ変化を監視し、HTMLコンテンツを自動的に更新する.
computed
計算プロパティはVueインスタンスに混入されます.すべてのgetterとsetterのthisコンテキストは、自動的にVueインスタンスにバインドされます.公式API

var vm = new Vue({
  data: { a: 1 },
  computed: {
    //    ，      
    aDouble: function () {
      return this.a * 2
    },
    //      
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // -> 2
vm.aPlus = 3
vm.a       // -> 2
vm.aDouble // -> 4

ここではsetterを省略することができ,setterを省略すれば値は通常関数であるが,戻り値が必要である.
methods
methodsはVueインスタンスに混入します.これらのメソッドは、VMインスタンスから直接アクセスするか、命令式で使用できます.メソッドのthisはVueインスタンスに自動的にバインドされます.公式API

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

次の例を見ると、methodsとcomputedは同じことができるように見えますが、単純に結果を見ると2つの方法は確かに同じです.しかしながら、異なるのは、計算属性がそれらの依存に基づいてキャッシュされることである.計算プロパティは、相関依存が変更された場合にのみ再評価されます.これは、messageが変更されていない限り、reversedMessage計算プロパティに複数回アクセスすると、関数を再実行する必要がなく、前の計算結果がすぐに返されることを意味します.対照的に、method呼び出しは、再レンダリングが発生する限り、この関数を実行します.

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

watch
オブジェクトで、キーは観察する式で、値は対応するコールバック関数です.値は、メソッド名またはオプションを含むオブジェクトであってもよい.Vueインスタンスは、インスタンス化時に$watch()を呼び出し、watchオブジェクトの各プロパティを巡ります.

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    //   a       ，       
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    //    watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    }
  }
})
vm.a = 2 // -> new: 2, old: 1

Vueインスタンスのライフサイクル
Vueインスタンスには、データの作成、初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、アンインストールなど、完全なライフサイクルがあります.これをVueのライフサイクルと呼びます.一般的には、Vueインスタンスの作成から破棄までのプロセス、すなわちライフサイクルです.
Vueのライフサイクル全体では、いくつかのライフサイクルフックが提供され、カスタムロジックを実行する機会を与えます.
次に、ライフサイクルフックがどのように使われているかをいくつかの例で見てみましょう.
完全なコードはcodepenに管理されています
HTML構造:{{number}}
私たちはinputとpに対してdataオブジェクトのnumberデータをバインドし、Vueインスタンスは以下のように構築した.

var app = new Vue({         
    el: '#app',               
    data: {                   
      number: 1
    }
})

インスタンスでは、各ライフサイクルフックのconsole.log(' ',this.number)で、最初のページのロード時にbeforeCreate、created、beforeMount、mountedというフックがトリガーされ、dataデータはcreatedで取得できることが分かった.
さらにconsole.log('mounted: ', document.getElementsByTagName('p')[0])に行くと、DOMレンダリングはmountedで完了しました.
さらにinput入力ボックスの内容を変更してみると、入力ボックスの上のデータ同期が変化していることがわかります.これがデータバインドの効果で、データの更新時にbeforeUpdateとupdatedフックがトリガーされ、beforeUpdateがトリガーされたときにデータが更新されました.
一方、destroyは、app.$destroy();が呼び出されたときにのみトリガーされ、vueインスタンスを破棄する.破棄が完了したらnumberの値を変更し直し、vueはこの動作に応答しません.しかし、生成されたdom要素はまだ存在し、destroy操作が実行され、その後vueによって制御されなくなることが理解される.
Vue.nextTick
遅延コールバックは、次回のDOM更新サイクルが終了した後に実行される.データを修正した直後にこの方法を用いて,更新後のDOMを取得する.公式API

Vue.nextTick(function () {
  // DOM    
})

公式には、vm.$nextTickという書き方も提供されています.thisを呼び出したインスタンスに自動的にバインドします.

created() {
    setTimeout(() => {
          this.number = 100
          this.$nextTick(() => {
            console.log('nextTick', document.getElementsByTagName('p')[0])
          })
    },100)
}

いつVueに着く必要がありますか.nextTick()

Vueライフサイクルのcreated()フック関数で行うDOM操作は必ずVueに置く.nextTick()のコールバック関数にあります.なぜかというと、created()フック関数が実行するときにDOMは実際にレンダリングされていないため、このときにDOM操作を行うのは無駄ではないので、ここでは必ずDOM操作のjsコードをVueに入れる.nextTick()のコールバック関数にあります.これに対応するのはmountedフック関数です.このフック関数の実行時にすべてのDOMマウントとレンダリングが完了したため、このフック関数でDOM操作を行っても問題はありません.

は、データが変化する後に実行すべきある操作である、この操作がデータが変化することによって変化するDOM構造を使用する必要がある場合、この操作はいずれもVueに入れるべきである.nextTick()のコールバック関数にあります.

ライフサイクルのまとめ
ライフサイクルフックの使用方法:
beforecreate:ここにloadingイベントを追加し、インスタンスのロード時にcreated:初期化完了時のイベントをトリガーしてここに書くことができます.ここでloadingイベントを終了すると、非同期要求もここでmounted:要素をマウントし、DOMノードupdatedを取得します.データを統一的に処理する場合、ここに対応する関数beforeDestroyを書きます:停止イベントを確認できる確認ボックスnextTickを作ります:データを更新したらすぐにdomを操作します
公式の例では、ライフサイクルフックの適用
シンプルなMarkdownエディタ
この例を実行するにはmarkedコンポーネントが必要であり、プロジェクトディレクトリの下でnpm i marked-Sを実行し、jsファイルのimport marked from 'marked'を実行すればよい.この例ではライフサイクルフックは使用されず、このコードを簡単に解読します.

methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
    }, 300)
  }

htmlではtextareaに@input=「update」がバインドされており、debounceコマンドで遅延を設定し、入力後の遅延ごとに入力ボックスのデータを同期させ、更新回数を減らし、性能を向上させる.
GitHub提出
この例はGithubのAPIから最新のVueを取得した.jsはデータをコミットし、リスト形式で表示します.マスターとdevブランチを簡単に切り替えることができます.

created: function () {
    this.fetchData()
  },

createdフックで宣言されたfetchData関数を使用してajax非同期データを取得し、ページにレンダリングします.
インラインアセンブリ
この例では、サードパーティjQueryプラグイン(select 2)を統合していますが、どうやってできますか?一般的なコンポーネントに埋め込むことです

mounted: function () {
    var vm = this
    $(this.$el)
      .val(this.value)
      // init select2
      .select2({ data: this.options })
      // emit event on change.
      .on('change', function () {
        vm.$emit('input', this.value)
      })
  },

この例ではコンポーネントselect 2を確立し,mountedフックにjQueryプラグインselect 2を追加する方法,データロード時に要素にこれらの方法を追加してDOMデータを取得する.