Vue.js で vm.$el を使って Vue インスタンスの DOM が取得できない時

Vue.js を初めて使ったときに、自分が微妙にハマったので備忘録として残しておきます。

created 時に this.$el で DOM にアクセスして中身を取得したかったんですが、何度やっても上手くいきませんでした。

原因

created 時にthis.$elで取得を試みましたがundefinedとなっていました。これは Vue のライフサイクルの中の mounted 以降でないと $el 自体が生成されないためでした。

created() {
    console.log( this.$el ) // ✖ここでは受け取れない
}

今回は mounted 時に取得するようにしました。

mounted() {
    console.log( this.$el ) // ◎
}

ちなみに beforeCreate 時にはthis.dataにもアクセスできないみたいです。ライフサイクルを全て使うということはあまりないかもしれませんが、公式リファレンスを読んで覚えておくと良いかもしれません。