Vueインスタンスのelと.$mount()の違い
- ほぼ一緒だけど、
.$mount()は「特定の要素がある」もしくは「非同期プロセスが完了させる」という理由でマウントを遅らせたいときに使える。
Difference between .$mount() and el [Vue JS]
ライフサイクルフックで何が起きているのか
インスタンスライフサイクルフック
下の絵の**赤い外線**で囲まれたところ
| イベントフック名 | 説明 |
|---|---|
| beforeCreate | すべてのフックの中で一番最初に実行されるフック data,eventがまだセットされていないのでアクセスできない |
| created | data,eventにアクセスできる まだテンプレート、DOMはレンダリングされていない コンポーネントの最初にセットされないといけないdataをここでセット |
| beforeMount | テンプレートがコンパイルされ、初めてレンダリングが起きる |
| mounted | コンポーネント、テンプレート、DOMにアクセスできる ただし、子コンポーネントが先にマウントされるのですべての子コンポーネントに対してアクセスできる保証はない .$nextTickを使うとDOMの更新を待ち受けた直後にアクセスできる |
| beforeUpdate | コンポーネントのデータが変わって、DOMが再レンダリングされる前に実行する 再レンダリングされる前の新しい状態のデータが取得できる |
| updated | コンポーネントのデータが変わり、再レンダリングされた直後に起きる ここでの処理によっては無限ループに陥ることもある mountedと同様、.$nextTickを使うことでDOMの更新を待ち受けた直後にアクセスできる |
| beforeDestroy | destoryされる直前に呼ばれる まだコンポーネントの機能とデータを持っている イベントリスナーを削除するときに使う |
| destroyed | destroyされた後に呼ばれる 該当Vueインスタンスの全てのディレクティブのバインドが解除され、全ての下位Vueインスタンスも削除される |
| [Vue.js 2.0 라이프사이클 이해하기 | |
| ](https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4) | |
| [Vue Parent and Child lifecycle hooks | |
| ](https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f) |
These relative modules were not foundのエラーが出たときに見直してみること
- 原因としてファイル内のパスが間違っていることで起きるエラー
- 相対パスで指定しておいたけど、途中でディレクトリ構成が変わってしまい、ファイルの依存関係がおかしくなった可能性がある
- 安全策として、絶対パスを使いましょう。
絶対パスの例
import Home from '@/components/Home.vue'
@import "~less/variables";