データ、計算などに関連付けられていない変数の反応性

1
Djee 2019-04-14 06:51.

多くの試行錯誤とvue.jsの読み取りの後、コンポーネントなどを使用して最初のアプリに取り組みました。外部オブジェクトをデータに関連付け、Vueがそれらの外部エンティティをdata / compute / watch / props属性にバインドする条件を把握するのは難しいと感じました。。私は自分のコンポーネントでいくつかの奇妙な驚きに遭遇し、codepenでいくつかのケースを調査することにしました。私の主な関心事は、たとえばa: b,dataセクションにありb、値、配列、オブジェクトなどの外部エンティティである場合、単純または深くネストされている場合{{a}}v-bind主にDOMへのバインドでどのように機能するかです。

これらのテスト中に驚いたことに、最初に見たの{{b}}は反応性もありました。セクションでb宣言されているので、なぜそうではありませんdata。オブジェクトのどこにも存在しない外部エンティティがどこにあるかを試してみると{{c}}、物事が奇妙になります。DOMも反応しました!cVuec

もっと不思議な、私はHTML /テンプレートの部分で、この現象を観察:watchのみに反応するacomputedabではなく上c

私も観察されprops、反応のように見えるabc

これらのテストはすべて、外部データを。で移動するように設定するコーデックで結合されsetIntervalます。ここにあります:https://codepen.io/Djee/pen/qwXjRw

もっと広く言えば、私が最初に言及したこれらの側面を扱った記事や資料は見つかりませんでした。具体的には、ハンドルバーに直接バインドされ、オブジェクトのどこにも言及されていないオブジェクトのこの種の自動バインドは見つかりませんでしたVue。私は何か見落としてますか?それらの側面を調査/説明する資料はありますか?助けてくれてありがとう。

PS:私のプロジェクトでthis.$watch(cb, {deep: true});は、created()関数での使用がより強力であることがわかりましたwatch。執筆時点では、このコーデックスには含まれていない、私にとってもう1つの奇妙な点です。多分私はそれを追加します。

1 answers

0
skirtle 2019-05-06 05:49.

これがあなたの質問の重要な部分だと思います:

DOMへのバインディングでどのように機能しますか

あなたがコードペンを書いた方法はこれを簡単な質問のように見せますが、ここにはすぐには明らかではないいくつかの段階が含まれています。

  1. Vueインスタンスを作成すると、container要素のコンテンツがテンプレートとして使用されます。その後、DOMノード自体は破棄されます。これは、機能する他のフレームワークの数とは大幅に異なるため、理解することが重要です。これらのDOMノードには何もバインドしていません。これらは単なるテンプレートです。
  2. 次に、そのテンプレートはrender関数にコンパイルされます。renderVueがコンポーネントをレンダリングするために呼び出すのはこの関数です。
  3. レンダリング中に、render関数は仮想DOM(VDOM)ノードを返します。これらのノードの一部はHTML要素に対応し、その他のノードは子コンポーネントを参照します。子コンポーネントが順番にレンダリングされ、最終的にすべてのコンポーネントがレンダリングされると、すべてがHTMLVDOMノードのみに縮小されます。
  4. 最初のレンダリング中に、これらのHTMLVDOMノードはかなり直接HTMLDOMに変換されます。更新(再レンダリング)中に、新しいVDOMは以前のVDOMと比較され、実際のDOMは変更が発生した場合にのみ更新されます。

反応性の観点からrenderは、計算されたプロパティによく似ています。render関数が触れたリアクティブデータはすべて追跡されます。その後、そのデータが変更されると、そのコンポーネントの再レンダリングがトリガーされます。

反応しないデータは追跡されません。そのデータを更新しても、再レンダリングは発生せず、計算されたプロパティは更新されず、watchリスナーはトリガーされません。

あなたの例では、単一のrender関数にコンパイルされる1つの大きなテンプレートがあります。リアクティブデータのいずれかが変更されると、再レンダリングがトリガーされます。これにより、render関数全体が実行され、新しいVDOMツリーが作成されます。データは必要に応じてアクセスされ、リアクティブデータと非リアクティブデータの両方が含まれます。

ただし、非反応性データを変更するだけの場合は、再レンダリングをトリガーするものは何もありません。その場合、render関数は呼び出されず、DOMの変更は発生しません。

名前v-bindがあなたを混乱させないでください。これは単に「これはJavaScript式です」という意味であり、必ずしも依存関係の作成とは関係ありません。依存関係はrender関数のレベルで追跡され、依存関係をDOMノードに直接リンクするための特別な処理はありません。依存関係が変更された場合、render関数全体が再実行されます。これは、render関数がVDOMを作成するだけなので、思ったほど高価ではありません。DOMを更新するコストのかかるプロセスでは、VDOMの差分/更新を使用して、それを必要とするDOMノードを更新するために必要な最小限の変更のみを行います。テンプレートがコンパイルされると、データとテンプレートに存在するように見えるDOMの間の直接リンクは保持されません。

計算されたプロパティも同様に機能します。それらの値はキャッシュされ、リアクティブな依存関係が更新されたときにのみ再計算されます。それらに非反応性の依存関係がある場合、それはキャッシュされた値を無効にしません。ただし、リアクティブな依存関係がキャッシュされた値を無効にする場合、変更された非リアクティブな依存関係は、新しい値が計算されるときに引き続きプルされます。

オブジェクト/配列がリアクティブであるかどうかを判断する最も簡単な方法は、コンソールにログアウトすることです。Vueがオブジェクトをリアクティブにすると、そのすべてのプロパティがゲッターとセッターに置き換えられ、コンソールでの表示方法が変わります。

通常、Vueは、オブジェクトが最初にに追加されたときに、オブジェクトを1回だけリアクティブにしdataます。その時点で存在するプロパティのみにゲッターとセッターが作成されるため、後で追加された新しいプロパティが反応しないという一般的な問題が発生します。それは何であるVue.setvm.$setするためのものです:

https://vuejs.org/v2/api/#vm-set

Vueは最近追加されましたVue.observable。これにより、オブジェクトを通過せずにリアクティブにすることができますdata

https://vuejs.org/v2/api/#Vue-observable

Related questions

MORE COOL STUFF

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire は、彼女が息子の Shelby Blackstock と共有する「楽しい」クリスマスの伝統を明らかにしました:「私たちはたくさん笑います」

Reba McEntire が息子の Shelby Blackstock と共有しているクリスマスの伝統について学びましょう。

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルとマライア・キャリーが自然な髪の上でどのように結合したかについて、メーガンの「アーキタイプ」ポッドキャストのエピソードで学びましょう.

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子は家族との関係を修復できるという「希望を持っている」:「彼は父親と兄弟を愛している」

ハリー王子が家族、特にチャールズ王とウィリアム王子との関係について望んでいると主張したある情報源を発見してください。

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドが、母親のナオミ・ジャッドが亡くなってから初めての感謝祭のお祝いを主催しているときに、彼女が今では家長であることをどのように認識したかを学びましょう.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

2017年の最も人気のある投稿

2017年の最も人気のある投稿

ここLifehackerでは大きな年でした。一緒に、私たちはミツバチを救おうとし、ハッキングされ、太陽をじっと見つめ、グロスチェーンレストランの食べ物を食べ、核爆弾から身を隠しました。

ラストコール:素晴らしき人生だ、コーシャワイン、そしてジュリアチャイルドはユールログを作るのが苦手

ラストコール:素晴らしき人生だ、コーシャワイン、そしてジュリアチャイルドはユールログを作るのが苦手

写真:ゲッティイメージズ経由のハーバート・ドーフマン/コービスさて、昨日、幼い子供たちにマジシャンズを見させて銃を飛び越えていたようです。知っておくと良い!昨夜、娘と私はシカゴの素晴らしいビンテージシアターであるミュージックボックスで映画を見に行きました。年齢に関係なく、誰も問題を抱えてはいけません。それは素晴らしい人生です。

それにふたを置きます。実際、すべてに蓋をしてください。14ドルで12個のシリコンストレッチキッチン蓋を手に入れよう. [エクスクルーシブ]

それにふたを置きます。実際、すべてに蓋をしてください。14ドルで12個のシリコンストレッチキッチン蓋を手に入れよう. [エクスクルーシブ]

Tomorrow's Kitchen シリコンストレッチ蓋 12個パック | $14 | アマゾン | プロモーション コード 20OFFKINJALids は基本的にキッチンの靴下です。常に迷子になり、二度と閉じられない孤立したコンテナーが残ります。しかし、蓋が伸びて、残った容器、鍋、フライパン、さらには大きなスライスされた果物のすべてに適合するとしたらどうでしょうか? その非常に特殊な蓋を失うことを二度と心配する必要はありません。

あなたの最高のワシントン DC ハックを教えてください

あなたの最高のワシントン DC ハックを教えてください

このコラムでは、ロサンゼルスやラスベガスなど、いくつかの産業都市をハッキングしました。今こそ、軍産複合都市の時代です。

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

米国のフィギュア スケートは、チーム イベントでの最終決定の欠如に「苛立ち」、公正な裁定を求める

ロシアのフィギュアスケーター、カミラ・バリエバが関与したドーピング事件が整理されているため、チームは2022年北京冬季オリンピックで獲得したメダルを待っています。

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

Amazonの買い物客は、わずか10ドルのシルクの枕カバーのおかげで、「甘やかされた赤ちゃんのように」眠れると言っています

何千人ものAmazonの買い物客がMulberry Silk Pillowcaseを推奨しており、現在販売中. シルクの枕カバーにはいくつかの色があり、髪を柔らかく肌を透明に保ちます。Amazonで最大46%オフになっている間にシルクの枕カバーを購入してください

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

パデュー大学の教授が覚醒剤を扱った疑いで逮捕され、女性に性的好意を抱かせる

ラファイエット警察署は、「不審な男性が女性に近づいた」という複数の苦情を受けて、12 月にパデュー大学の教授の捜査を開始しました。

コンセプト ドリフト: AI にとって世界の変化は速すぎる

コンセプト ドリフト: AI にとって世界の変化は速すぎる

私たちの周りの世界と同じように、言語は常に変化しています。以前の時代では、言語の変化は数年または数十年にわたって発生していましたが、現在では数日または数時間で変化する可能性があります。

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

犯罪擁護派のオークランドが暴力犯罪者のロミオ・ロレンゾ・パーハムを釈放

SF攻撃で91歳のアジア人女性が殴られ、コンクリートに叩きつけられた

認知症を患っている 91 歳のアジア人女性が最近、47 番街のアウター サンセット地区でロメオ ロレンゾ パーハムに襲われました。伝えられるところによると、被害者はサンフランシスコの通りを歩いていたところ、容疑者に近づき、攻撃を受け、暴行を受けました。

Precios accesibles, nuestro aprendizaje desde la perspectiva iOS

Precios accesibles, nuestro aprendizaje desde la perspectiva iOS

Cómo mejoramos la accesibilidad de nuestro componente de precio, y cómo nos marcó el camino hacia nuevos saberes para nuestro sistema de diseño. Por Ana Calderon y Laura Sarmiento Leer esta historia en inglés.

ℝ

“And a river went out of Eden to water the garden, and from thence it was parted and became into four heads” Genesis 2:10. ? The heart is located in the middle of the thoracic cavity, pointing eastward.

Language