特別な問題に対処する

このページはすでにコンポーネントの基本を読んでいることを前提に書いています。もしまだ読んでいないのなら、先に読みましょう。

Note

特別な問題、つまり珍しい状況に対処するためのこのページの全ての機能は、時に Vue のルールを多少なりとも曲げることになります。しかし注意して欲しいのが、それらは全てデメリットや危険な状況をもたらし得るということです。これらのマイナス的な面はそれぞれのケースで注意されているので、このページで紹介されるそれぞれの機能を使用すると決めたときは心に止めておいてください。

更新をコントロールする

Vue のリアクティブシステムのおかげで、いつもいつ更新するかを知ることができます(もしあなたが正確に使っているなら)。しかし、リアクティブデータが変更されていないにも関わらず更新を強制したいときなど、特別なケースがあります。

強制更新

もし Vue で強制更新をする必要な場面に遭遇する場合、99.99% のケースであなたは何かを間違えています。例えば、コンポーネントの作成後に追加された data プロパティなど、Vue のリアクティブシステムが追跡していない状態に依存している可能性があります。

しかし、もし上記の可能性を排除し、手動で強制更新をする非常に稀な状況と認識しているならば、 $forceUpdate を用いることで強制更新をすることができます。

v-once を使用するチープスタティックコンポーネント

プレーンな HTML 要素をレンダリングすることは Vue においてとても高速です。しかしときどき多くの静的なコンテントを含むコンポーネントを持ちたい場合もあるかもしれません。これらのケースでは、このようにルート要素に v-once ディレクティブを加えることによって一度だけ評価され、そしてキャッシュされることを保証することができます:

app.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})

TIP

再度注意しますが、このパターンを多用しないようにしてください。多くの静的な内容を描画しなければならないとき、これらのレアケースは便利である一方、あなたが実際に遅いレンダリングに気付かない限りは絶対に必要ではありません。さらにそれは後に多くの混乱の原因になり得るでしょう。例えば、 v-once に精通していない開発者や、単純にテンプレート内にそれを見逃した開発者を想像してみてください。それらはなぜテンプレートが正確に更新されないのかの原因究明に時間を費やすことになるかもしれません。