こんにちは、”はふぃ”です。

JavaScriptのコードを扱っていると、変数名の先頭に_(アンダースコア)がついている時があると思います。

意味はローカル変数を表していることが多く、private宣言ができないJavaScriptではスコープの違いを表すために使われます。

< underscoreSample.js >

// グローバル変数
export function actionA () {
  const message = _actionB()
  return `this is message: ${message}`
},
// ローカル変数
function _actionB () {
  return 'Hello World!'
}

しかし、これをVue.jsのプロパティで利用する際には注意が必要です!

_(アンダースコア)問題

Vue の内部的なプロパティや API メソッドと衝突する可能性があるため、_ または $ から始まるプロパティは Vue インスタンスにプロキシされないことに注意してください。それらは vm.$data._property としてアクセスできます。

https://jp.vuejs.org/v2/api/#data

上記の公式ドキュメントにも書いてあるように、Vue.jsのdataのプロパティでは_(アンダースコア)から始まる変数を使うことはできません!(this.$dataとすることで使えますが)

< sample.vue >

<template>
…
</template>

<script>
  export default {
    data () {
      return {
        sampleDataA: 'this is sampleDataA',
        _sampleDataB: 'this is sampleDataB'
      }
    },
    mounted () {
      // ◯: 表示される
      console.log(this.sampleDataA)
      // ×: 表示されない
      console.log(this._sampleDataB)
      // ◯: これなら表示される
      console.log(this.$data._sampleDataB)
    }
  }
</script>

<style></style>

まとめ

Vue.jsのdataプロパティでは_(アンダースコア)は使わない方が良い!(computedmethodsdataと同じようにthis.〇〇で参照できるので、混乱を避けるために他でも極力利用しない方が良いかもしれない)

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA