70
72

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Vue.js】Vue.jsの仕組みについて、知っておくべきこと

Last updated at Posted at 2020-10-04

#DOMとは

DOMとは、マークアップ言語(html, xml)を、プログラミング言語によって、操作することでWebページの見た目を変化させることができる仕組み。

スクリーンショット 2021-03-05 18.31.42.png

#仮想DOMとは

先ほどのDOMツリーを内容の更新時に全て読み込むのではなく、はじめに全て読み込んだ後は更新した差分のみを仮想のDOMツリーに追加する。
そうすることで、よりリアクティブにwebページに反映することができる。

スクリーンショット 2021-03-05 18.32.02.png

#Vue.jsとは

一方向での、JavaScriptオブジェクト(データ)とDOM要素のやりとりではなく、双方向にすることでよりリアルタイムでスピーディにデータのやり取りを実現できる、JavaScriptのライブラリ。
双方向でのデータのやり取りをするための仲立ちをするのが、Vueインスタンス(ビューモデル)。

スクリーンショット 2021-03-05 18.33.13.png

#Vue.jsのライフサイクル

Vue.jsの機能を反映させるためには、Vueインスタンスが生成された後に、データやDOM要素に接続される必要がある。
その順序こそが、ライフサイクルのなのである。

IMG_2362.jpeg.jpg

そして、データと、DOM要素にアクセスできるかで、ライフサイクルに因んだオプションの違いを比較できる。

<template>
  <div class="sample">
    {{ count }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  beforeCreate() {
    console.log("beforeCreate");
    console.log(this.count);
    console.log(this.$el);
  },
  created() {
    console.log("created");
    console.log(this.count);
    console.log(this.$el);
  },
  beforeMount() {
    console.log("beforeMount");
    console.log(this.count);
    console.log(this.$el);
  },
  mounted() {
    console.log("mounted");
    console.log(this.count);
    console.log(this.$el);
  },
};
</script>
# データにもDOM要素にもアクセスできない
beforeCreate
undefined
undefined

# データにはアクセスできるが、DOM要素にはアクセスできない
created
0
undefined

# データにはアクセスできるが、DOM要素にはアクセスできない
beforeMount
0
undefined

# データにもDOM要素にもアクセスできる
mounted
0
<div class="sample">
  0
</div>
70
72
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
70
72

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?