* after * renderを更新するDOMに基づく計算されたプロパティ

Question

計算プロパティをDOMプロパティの変更に対応させるには、どのような方法が推奨されますか？

私のシナリオは次のとおりです。
私は、DOMにある値（例えば、要素の幅）に基づいて計算されたプロパティを持っています。
ビューの更新の結果、DOMプロパティが変更されます。
これで、計算されたプロパティはDOMの変更の結果として更新されません。

私はこの問題を説明するためにsimplified exampleのcodepenを作成しました。この例では、 'updated'フックで変更される 'ダミー'プロパティを使用して計算されたプロパティを強制的に更新しています。

updated(){ 
    console.log('updated') 
    this.dummy= this.dummy * -1 
}, 
computed:{ 
    width(){ 
    console.log('computed') 
    const w = (this.$refs.square || {}).clientWidth 
    return w + this.dummy * 0 
    } 
} 

私は、DOMの変化に反応し、プロパティの更新、およびプロパティの変更に反応DOMの更新場合は、よく、それに終わりはないであろうことを理解してください。

だから、2つの同期を保つためのクリーンな方法はありますか？

ありがとうございました

Answer 1

通常、DOMプロパティには依存しません。通常、DOMはデータによって完全に決定されます。そうすれば、あなたはこの問題を起こさないでしょう。

というレンダリングを追加してレンダリングした場合、$nextTickを使用してプロパティを同期させることができます。

data:{ 
    size:20, 
    width: 20 
}, 
methods:{ 
    onInput(e){ 
    this.size =e.target.value 
    this.$nextTick(() => this.width = (this.$refs.square || {}).clientWidth) 
    } 
} 

ちょうどあなたの計算を完全に排除します。

penが更新されました。