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";

webpack モジュールのパスを絶対パスで指定する方法

フロントエンジニアが3年間チャットワークにメモしてたことを振り返る