SIerだけど技術やりたいブログ

5年目のSIerのブログです

Vuejs APIアクセスはcreatedとmountedのどちらで行う?

created と mounted はざっくりした理解だと、こんな感じ。

  • created
    • インスタンスの初期化が済んで props や computed にアクセスできる状態
  • mounted
    • created + DOMにアクセスできる状態

https://jp.vuejs.org/images/lifecycle.png

APIアクセスは created と mounted のどちらで行う?

APIアクセスはほとんどのライブラリで非同期に行われる。なので created と mounted のどちらでAPIアクセスを開始しようが、レスポンスが返ってきた時点でコールバックが実行される。それを踏まえて、コールバックの中で

  • propsにデータを設定するだけの場合は created を使う
    • DOM構築してる間にもHTTP通信を待てるから
    • Chromeは優秀すぎてほぼ違いでなかったけど、Edgeだとけっこう違う
  • DOMにアクセスする必要があるときは mounted を使う
    • レスポンスが即返ってきた場合でもDOMにアクセスできないとダメだから
    • jQuery 時代をひきずったようなDOM直接指定ライブラリ使うときはコレ

だと思う。

動作確認する

  "dependencies": {
    "axios": "^0.17.1",
    "vue": "^2.5.2"
  }

json serverを用意する

$ json-server --watch db.json
{
  "users": [
  {
    "id": 1,
    "name": "Stark"
  },
  {
    "id": 2,
    "name": "Targaryen"
  },
  {
    "id": 3,
    "name": "Tyrell"
  }
  ]
}

サンプルを用意する

<template>
  <section>
  <h1>ユーザリスト</h1>
  <ul>
    <li v-for="user in users" :key="user.id">
    {{user.name}}
    </li>
  </ul>
  </section>
</template>

<script>
import Axios from 'axios'

export default {
  name: 'Users',
  data () {
    return { users: [] }
  },
  created () {
    const self = this
    Axios.get('http://localhost:3000/users')
    .then((res) => {
      self.users = res.data
    })
  }
}
</script>
実行結果
  • mounted が実行される
  • usersが [] の状態でDOMが作られる
  • レスポンスが返ってきたら users に値が設定される
  • Vueが変更を検知してDOMが再構築される

f:id:kimulla:20180203164222g:plain

参考

jp.vuejs.org