Vue(紙幅4)

どのようにVueを学ぶかについて、Vueの創設者である尤雨渓先輩はかつて、Vue 2.0の提案学習順序を知乎に発表したことがある.Vueのその他の知識について紹介します:1編幅2編幅3
7.ライフサイクルフック

beforeCreate:インスタンス初期化後、データ観測(data ovserver)およびevent/watcherイベント構成の前に呼び出される$el:undefined$data:undefined

created:インスタンスの作成が完了するとすぐに呼び出されます.このステップでは、インスタンスは、データ観測(data observer)、属性およびメソッドの演算、watch/eventイベントコールバックの構成を完了しました.しかし、マウント段階はまだ始まっていない.$el :undefined $data :[object object]

beforeMount:マウント開始前に呼び出されます:関連するrender関数が初めて呼び出されます.フックは、サーバ側のレンダリング中に呼び出されません.$el :undefined $data :[object object]

mounted:elが新しく作成されたvm.$elを置き換え、インスタンスにマウントした後、フックを呼び出します.rootインスタンスがドキュメント内の要素をマウントしている場合、mountedが呼び出されたときvm.$elもドキュメント内にあります.$el :[object HTMLDivElement] $data :[object object]

beforeUpdate:仮想DOMの再レンダリングとパッチ適用の前に、データ更新時に呼び出されます.このフックで状態をさらに変更すると、追加の再レンダリングプロセスはトリガーされません.

updated:データの変更により仮想DOMが再レンダリングされ、パッチが適用され、その後フックが呼び出されます.このフックが呼び出されると、コンポーネントDOMが更新されるので、DOMに依存する操作を実行できます.しかし、ほとんどの場合、その間にステータスを変更することは避けなければなりません.適切な状態を変更する場合は、通常、計算プロパティまたはwatcherを使用して置換することが望ましい.

beforeDestroy:インスタンスが破棄される前に呼び出されます.このステップでは、インスタンスは完全に使用できます.

destroyed:Vueインスタンスが破棄された後に呼び出されます.呼び出し後、Vueインスタンスが示すすべてのものがバインド解除され、すべてのイベントリスナーが削除され、すべてのサブインスタンスも破棄されます.

activatedkeep-aliveコンポーネントアクティブ時呼び出し

deactivatedkeep-aliveコンポーネント非アクティブ時コール注意:

Vue.nextTickおよびvm.$nextTick以下の内容は、Vueの公式サイトから来ています.非同期更新キューは、VueがDOM更新を非同期で実行していることに気づいていない可能性があります.データの変化が観察される限り、Vueはキューを開き、同じイベントサイクルで発生したすべてのデータの変化をバッファリングする.同じwatcherが複数回トリガーされると、キューに一度だけ押し込まれます.このようなバッファリング時に重複データを除去することは,不要な計算やDOM動作を回避する上で非常に重要である.その後、次のイベントループ「tick」では、Vueがキューをリフレッシュし、実際の(重複した)作業を実行する.Vueは内部で非同期キューに対してオリジナルのPromise.thenとMutationObserveを使用しようと試み、実行環境がサポートされていない場合はsetTimeout(fn, 0)に置き換えられる.たとえば、vm.someData = 'new value'を設定すると、コンポーネントはすぐに再レンダリングされません.キューをリフレッシュすると、イベントループキューが空になったときにコンポーネントが次のtick更新されます.多くの場合、このプロセスに関心を持つ必要はありませんが、DOMステータスの更新後に何かをしたい場合は、少し難しいかもしれません.Vuejsは通常、開発者がDOMに直接接触しないように「データ駆動」に沿って考えることを奨励していますが、時にはそうする必要があります.データが変化した後に、VueがDOMの更新を完了するのを待つために、Vue.nextTick(callback)をデータが変化した直後に使用することができる.これにより、コールバック関数はDOM更新が完了すると呼び出されます.

//html
{{msg}}
{{msg1}}
{{msg2}}
{{msg3}}

//js
data: function(){
  return {
    msg: '    ',
    msg1: '',
    msg2: '',
    msg3: '',
  }
},
methods: {
  changeMsg(){
    this.msg = '     '
    this.msg1 = this.$ref.msg.textContent //       
    this.$nextTick(() => {
        this.msg2 = this.$refs.msg.innerHTML  //      
      })
      this.msg3 = this.$refs.msgDiv.innerHTML        
  }
}

いつ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

を操作する