2017-05-03 8 views
3

私は気に入りコンポーネントがある場合:Vue更新フックの変更を取得する方法は?

<script> 
    export default { 
    updated() { 
     // do something here... 
    } 
    }; 
</script> 

が更新の結果の変更を取得する方法はありますか?同様に、watchフックは前と次のデータの引数を受け入れますか?

watch: { 
    someProp(next, prev) { 
    // you can compare states here 
    } 
} 

componentDidUpdateフックでこれを行うように見えるので、私はVueのは、似た何かを持っていると仮定していますが、私は間違っている可能性が反応します。

+1

時計は更新が生じた変更を確認するために、次や前の状態を受け、そのためには何が必要だように見えます。あなたがDOMの変更を考えている場合を除きます。その場合、beforeUpdate()とupdated()サイクルフックを使用してdomを比較できます。それはあなたが必要とするものですか? –

+0

私は、 'updated()'フックにある種の変更のリストを得ることを望んでいました。それは可能ですか? – Rob

+0

返信するのに十分なvueを知らない、申し訳ありません。それはoldvnodeと新しいvnodeを注入することができ、更新された(oldVnode、vNode){console.log(oldVnode); }何が起こるかを見てください。 –

答えて

1

updatedライフサイクルフックは、Vueコンポーネントインスタンスが何を更新するのかについての情報を提供しません。データ変更に対応する最善の方法は、ウォッチャーを使用することです。

しかし、デバッグのために更新が行われた原因を調査する場合は、Vueインスタンスのデータの状態への参照を保存し、更新時の状態と比較することができます。

ここで更新をトリガする、変更されたプロパティの名前をログに記録するlodashを使用してスクリプトの例です:

updated() { 
    if (!this._priorState) { 
    this._priorState = this.$options.data(); 
    } 

    let self = this; 
    let changedProp = _.findKey(this._data, (val, key) => { 
    return !_.isEqual(val, self._priorState[key]); 
    }); 

    this._priorState = {...this._data}; 
    console.log(changedProp); 
}, 

アンダースコア文字を前に追加のプロパティが内部使用のために予約して利用できませんされているので、これは動作します結合。この方法でVueコンポーネントをデバッグする必要があるときはいつでも、これをmixinに保存することができます。

Here's a working fiddle for that example.

関連する問題