vue.js使用中のメモ

watchリストのimmediateがtrueである場合、リスニングコールバックはbeforeCreateとcreatedのライフサイクルの間で実行されます.このリスニングコールバックでサブコンポーネントまたはDOM要素にアクセスするには、this.$nextTick()を使用します.beforeUpdateおよびupdatedライフサイクルフック関数は、特にこのようなライフサイクル関数でdataのデータを変更することはできません.そうしないと、デッドサイクルおよびブラウザのクラッシュを引き起こしやすくなります(beforeUpdateおよびupdatedライフサイクルがトリガーされ、microtaskキューにタスクが挿入されます).このようなライフサイクルでdataのデータを変更する必要がある場合は、setTimeout()の関連操作を考慮することができます(関連操作はmacrotaskに配置され、一般的にブラウザが完全に詰まってしまうことはありません).データがDOMにレンダリングされ、頻繁に変動する場合、beforeUpdateおよびupdatedのライフサイクルフック関数も頻繁に呼び出され、パフォーマンスの低下の問題になりやすい.
コンポーネントがロードされたばかりのとき、render関数はbeforeMountとmountedの間で実行され、その後、データが更新されるたびに実行され、beforeUpdateとupdatedの間で実行される.
SSRモードでは、サービス側がbeforeCreateとcreatedのライフサイクルフック関数を実行した後、render関数生成ページの内容を直接実行します.
dataで変更された変数がテンプレートで使用されるか、レンダリング関数にアクセスされると、コンポーネントの再レンダリングがトリガーされ、beforeUpdateおよびupdateのライフサイクルがトリガーされます.
コンポーネント間転送値について:

親コンポーネントまたは子コンポーネントdataの値を直接変更することは推奨されず、コードのメンテナンスが困難になりやすい.

は、一般に、propsによって親コンポーネントから子コンポーネントにデータを送信し、$emitイベントによって子コンポーネントから親コンポーネントに値を送信することができる.ここでは、v-modelの機能と.syncの修飾子の機能を独自のコンポーネントに実現し、コードのメンテナンス性を向上させるために、より多くのPropとカスタムイベントの使い方があります.

このようなデータは、いくつかのデータが複数の非親子構成要素で読み取り/変更される必要がある場合、vuexに入れることが考えられる.