こんにちは、”はふぃ”です。
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 メソッドと衝突する可能性があるため、
https://jp.vuejs.org/v2/api/#data_
または$
から始まるプロパティは Vue インスタンスにプロキシされないことに注意してください。それらはvm.$data._property
としてアクセスできます。
上記の公式ドキュメントにも書いてあるように、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.〇〇
で参照できるので、混乱を避けるために他でも極力利用しない方が良いかもしれない)