【Vue.js】dataプロパティでの_（アンダースコア）の扱い

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

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プロパティでは_（アンダースコア）は使わない方が良い！（computedやmethodsもdataと同じようにthis.〇〇で参照できるので、混乱を避けるために他でも極力利用しない方が良いかもしれない）