Vueのプロパティを分かりやすくする

気になったこと

Vueは設定ではdataやpropsやcomputedで分かれていますが、実際に使うときはthis.~でそのまま使えてしまうため、どこで設定したものか分かりにくくなってしまいます。

よくやる書き方

<template lang="pug">
div
  //- それぞれがどこのデータか分からない
  p {{ a }}
  p {{ b }}
  p {{ c }}
</template>

<script>
export default {
  props: {
    a: {
      type: String,
      default: 'Hello'
    }
  },
  data() {
    return {
      b: 'World'
    };
  },
  computed: {
    c() {
      // ここもdataのものなのかpropsのものなのかあんまりわからない
      return this.a + ' ' + this.b;
    }
  }
};
</script>

対応方法

propsとdataについては、Vue側でthis.$props, this.$dataが作られていたので、これを使って以下のようなルールにしたらある程度分かりやすくなるのかなと思いました。

• propsの呼び出しはthis.$props.~にする
• dataはthis.$data.~で呼ぶ（this.~でもいい）
• computedは先頭に_をつける（キャッシュ的な存在なので）

ルールに基づいた書き方

<template lang="pug">
div
  p {{ $props.a }}
  p {{ $data.b }}
  p {{ _c }}
</template>

<script>
export default {
  props: {
    a: {
      type: String,
      default: 'Hello'
    }
  },
  data() {
    return {
      b: 'World'
    };
  },
  computed: {
    _c() {
      return this.$props.a + ' ' + this.$data.b;
    }
  }
};
</script>

watchについて

watchするときも$propsをつけることは可能なようです（変な感じはしますが）。

<script>
export default {
  props: {
    a: String
  },
  watch: {
    '$props.a'(val, oldVal) {
      console.log('changed', oldVal, '->', val);
    }
  }
}
</script>

定数の扱い

定数については大文字で書くのでそのままthisに入れていても見分けはつきますが、this.Cとかにまとめて入れておくと注入するのが楽になると思います。

<template lang="pug">
div
  p 定数：{{ C.STR }}
  p データ：{{ $data.value }}
</template>

<script>
const STR = '定数文字列';

export default {
  data() {
    this.C = {
      STR
    };
    return {
      value: 10
    };
  }
}
</script>