※当サイトの記事には、広告・プロモーションが含まれます。

トップ > JavaScript > Vue.jsのリアクティブが反映されるタイミングがハッキリしない

Vue.jsのリアクティブが反映されるタイミングがハッキリしない

JavaScript DOM（Document Object Model） Vue.js Virtual DOM

f:id:ts0818:20220327183415j:plain

nazology.net

科学技術の進歩は、私たちにとって有用な反面、使い方次第では、同じくらい負の遺産を生み出します。

創薬AIがわずか6時間で4万種の「化学兵器」をデザイン！ - ナゾロジー

このほど、米・英・スイスの国際研究チームは、創薬のためのAI（人工知能）モデルが、化学兵器の開発に悪用された場合を想定したシミュレーションを実施。

創薬AIがわずか6時間で4万種の「化学兵器」をデザイン！ - ナゾロジー

その結果、AIはわずか6時間で、4万種類の毒性の高い化合物のデザインを提案しました。

創薬AIがわずか6時間で4万種の「化学兵器」をデザイン！ - ナゾロジー

これは、人類を救うはずのAIが、同じくらい致死的な技術になることを証明するものです。

創薬AIがわずか6時間で4万種の「化学兵器」をデザイン！ - ナゾロジー

⇧ え～っと、「技術的特異点（シンギュラリティ）」が2045年に起こると予測されてるけども、AIによって人類が絶滅危惧種に追い込まれるようなことにはなってしまわないように、AIを制御する技術も研究を進めて欲しいですかね。

ただ、制御できたらできたで、結局利用する側の倫理観に委ねられると思うので、難しい問題ですな。

今回は、Vue.jsについてです。

レッツトライ～。

Vue.jsのリアクティブとは？

公式のドキュメントによると、

v1.vuejs.org

Reactive Data Binding

At the core of Vue.js is a reactive data-binding system that makes it extremely simple to keep your data and the DOM in sync. When using jQuery to manually manipulate the DOM, the code we write is often imperative, repetitive and error-prone. Vue.js embraces the concept of data-driven view. In plain words, it means we use special syntax in our normal HTML templates to “bind” the DOM to the underlying data. Once the bindings are created, the DOM will then be kept in sync with the data. Whenever you modify the data, the DOM updates accordingly. As a result, most of our application logic is now directly manipulating data, rather than messing around with DOM updates. This makes our code easier to write, easier to reason about and easier to maintain.

https://v1.vuejs.org/guide/overview.html

⇧ まずもって、Vue.jsの主要な機能の1つとして、

「DOM（Document Object Model）」

↓↑

「JavaScript」

間でお互いに変更があったら変更を反映する「データバインディング」というものがありますと。

Vue.jsで用意されている機能を利用するためには、

jp.vuejs.org

全ての Vue アプリケーション は、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。

https://jp.vuejs.org/v2/guide/instance.html

⇧「Vueインスタンス」が必要で、更に、

コンポーネントは名前付きの再利用可能な Vue インスタンスです。

https://jp.vuejs.org/v2/guide/instance.html

コンポーネントは再利用可能な Vue インスタンスなので、data、computed、watch、methods、ライフサイクルフックなどの new Vue と同じオプションを受け入れます。唯一の例外は el のようなルート固有のオプションです。

https://jp.vuejs.org/v2/guide/instance.html

⇧「コンポーネント」って概念が出てくるのだけど、「コンポーネント」も「Vueインスタンス」であると。

「すべてがFになる（著：森博嗣）」になる、じゃないけど、Vue.jsの世界では、すべてが「Vueインスタンス」になる、と言ったところでしょうか？

で、引き続きドキュメントを読み進めると、この「コンポーネント」が「リアクティブ」を実現するための機能を持っていますと。

jp.vuejs.org

全てのコンポーネントインスタンスは対応する ウォッチャ (watcher) インスタンスを持っていて、これはコンポーネントを描画する間に “触れた (touched)” プロパティを全て依存性として記録しています。その後、依存性の setter がトリガされると、ウォッチャに通知してコンポーネントの再描画が起動します。

https://jp.vuejs.org/v2/guide/reactivity.html

⇧ 上図のすべてを「コンポーネント」が内包してるということでしょうかね。

Vue.jsのリアクティブが反映されるタイミングがハッキリしない

で、「リアクティブ」に「データバインディング」してくれるのはありがたいのですが、タイミングが知りたいというのが人情。

jp.vuejs.org

各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、特定の段階でユーザー自身のコードを追加する、いくつかの ライフサイクルフック(lifecycle hooks) と呼ばれる関数を実行します。 

Vue インスタンス — Vue.js 

例えば、created フックはインスタンスが生成された後にコードを実行したいときに使われます。

Vue インスタンス — Vue.js 

この他にもインスタンスのライフサイクルの様々な段階で呼ばれるフックがあります。例えば、mounted、 updated、そして destroyed などがあります。全てのライフサイクルフックは、this が Vue インスタンスを指す形で実行されます。

Vue インスタンス — Vue.js 

⇧ という説明があり、

⇧ 上図の赤い角丸の長方形で囲まれたものが「ライフサイクルフック」というものになるってことでしょうかね。

で、「ライフサイクルフック」はと言うと、

v2.vuejs.org

Vue.extend( options )

Usage:

Create a “subclass” of the base Vue constructor. The argument should be an object containing component options.

https://v2.vuejs.org/v2/api

⇧「Vueインスタンス」を生成する際のオプションの1つということらしい。

「ライフサイクルフック」は全部で、

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed
  • errorCaptured

11個用意されてるらしいのですが、どの「ライフサイクルフック」の段階で「データバインディング」が完了するのかがいまいちハッキリしない...

そもそも何でこんなことを気にしてるかと言うと、JavaScript側で変数が初期化される前に、「DOM（Document Object Model）」のほうでJavaScriptの変数が参照されたりすると不都合が起きるからというね。

例えば、配列のlengthなんかで判定したいようなケースで、配列が初期化されてないと、undefined.lengthとかになって「Cannot read property 'length' of undefined
」ってエラーが起きがちというね...

まぁ、

<ul v-if="users && users.length">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

⇧ みたいな感じで、lengthを確認する前に、初期化されてるか確認すれば良いとは思うのだけど、「データバインディング」が完了するタイミングをドキュメントでハッキリ書いておいてくれれば良いのにな～って感じてしまうよね。

フレームワークのドキュメント、もう少し曖昧さを無くしてくれると嬉しいですかね...

毎度モヤモヤ感が半端ない...

今回はこのへんで。

 

 

コメントを書く