vue(nuxt)でcomputedの呼び出しタイミングなど【使い方まとめ】

おすすめのオンラインプログラミング学習

vue(nuxt)のcomputedとwatch覚書です。

vue(nuxt)でcomputedの呼び出しタイミング【使い方】

computedの呼び出しタイミング

computed: {
  test() {
    console.log('test')
  }
}

起動時に呼ばれますね。Html側で{{ test }}で呼び出しましょう。

{{ test }}
computed: {
  test: {
    get() {
      console.log('get')
      return 0
    },
    set(val) {
      console.log('set')
    }
  }
}

これだけでは起動時には呼ばれません。v-modelで呼んであげましょう。v-modelはcomputedだけではなく、dataなどに関連付けても使えます。

getはreturn必須です。エラーがでます。

computedとdata

computedとdataのどちらかに初期値が記載されていればOKです。

mapGettersなどから値を取得した場合、あえてcomputedに初期の処理を書いた方がいい場合もあります。

初回のみはdataに指定しcreateに記述すればOKです。v-bindをcomputedに関数化して記述すると複数回呼び出されて悩まされることもあります。

computedのthis

computedに限らず、thisを使うと、dataなどすべての値にアクセスできます。

computed: {
  test: {
    get() {
      this.name = 'vue-kun' // NG
      return this.name // OK
    },
    set(val) {
      this.name = val // OK
    }
  }
}

ただし、getの代入はダメです。

Unexpected side effect in "XXX" computed property

がでます。

computedのsetと表示変更

選択した際に表示を変える場合、次のように繋ぐのが便利ですね。

computed: {
  choice: {
    get() {
    },
    set(val) {
      this.selected = val
    }
  }
  show() {
    const show = this.selected
  }
}

this.selectedはもちろんmethodsなどでも取得できます。

computedからmethodsの呼び出し

computedからmethodsの呼び出しすることがあります。こちらは問題なくできます。

computed: {
  test() {
      this.addServerData(string)
  }
},
methods: {
  addServerData(name) {
    this.name = name
  }
}

methods先でreturnしたものをconstに代入してreturnはできます。あと、thisはうっかりとつけ忘れないようにしましょう。

ただ、watchで処理する場合もあります。

computedでfirebaseからデータを取得時にnull

computedでfirebaseからデータを取得時にnulがくる症状がでました。

とりあえず、以下のように応急処理しました。

computed: {
  ...mapGetters({ getData: 'data/getData' }),
  test: {
    get() {
      if (this.getData === null) {
        return null
      }
    }
    return this.getProfile.name
  },
  set(val) {}
}
created() {
  this.$store.dispatch('data/bindData')
},

初期化時と変更時に呼びだされますが、初期化時点ではnullがきてしまうようです。

computedとwatchの違いは戻り値

似ていますが、watchには戻り値がありません。そのためcomputedを使われる方が多いかもしれません。基本はcomputedです。

watchはapiの非同期通信などに使います。

computedの引数渡し

通常の方法では渡せません。返り値を関数にして渡します。

computed: {
    getImg() {
      return (num) => {
        console.log('num', num)
      }
    }
}

if文で切り分けている場合、他もreturn () => {}で返さないといかないため忘れずに。

computedの学習なら

computedの学習なら、、udemyに良質な教材があります。vue、nuxt、firestoreなどのおすすめ教材をまとめました。

vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。おすすめ本だけではなく、動画講座やサンプルコードも紹介していきます。 現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしていま...
スポンサーリンク

Computedのエラー

[Vue warn]: Computed property “” was assigned to but it has no setter.

[Vue warn]: Computed property "" was assigned to but it has no setter.

setterが必要なのにないですね。v-modelを使っているのにsetとgetの構成ではないということです。

スポンサーリンク

vueのライフサイクル(呼ばれる順番)

呼ばれる順番ですが、よく使うところだとcreated、mounted、watchの順番です。

  • createdはDOM生成前
  • mountedはDOM生成後(描画後、プラグインの初期化などを行う)
  • watchは監視してひっかける感じ

詳細は公式で。

Vue インスタンス — Vue.js
Vue.js - The Progressive JavaScript Framework

あれ?computedがない?

検証はしていませんが、こちらの記事をみました。

Vueライフサイクルの盲点、computedの一発目の発火はmountedより早い - Qiita
TL;DR ライフサイクルダイアグラム よく出てくるこの図ですが、computedって乗ってないんですよね。 さて、もうタイトルで語りたい...

created、computed、mounted、watchの順番ですかね。

mounted内の値をcomputedのgetter()でつかうことはできません。

watch

watchはreturnが使えません。監視タイミングが変化したタイミングで呼ばれます。thisも使えないため、適当な変数を用意します。基本はcomputedを使いますが、非同期処理に使います。

初期化のタイミングで発火したい場合は、immediate: trueを付与します。

   watch: {
     data: {
         handler(val) {
             this.data
         },
         immediate: true
     }
   }

基本的なことでしたが参考になれば幸いです。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました