Vue HTML变量中$符号的使用时机及差异咨询

嘿，这个问题问得特别实用，很多刚接触Vue的同学都会搞混这个点，我来给你拆解清楚：

关于{{ a }} vs {{ $a }} #

• {{ a }}是正确的写法：Vue会把你data里定义的属性代理到Vue实例本身，所以在模板里直接写属性名就能访问到data里对应的值。比如你示例里的a: "myData"，用{{ a }}就能正常输出myData，这是日常开发中最常用的方式。
• {{ $a }}几乎是错误的用法：Vue里只有内置的实例属性/方法才会以$开头（比如$data、$props、$emit这些），如果你没有特意在实例上定义$a这个属性，模板里写{{ $a }}会找不到对应的值，直接显示空或者报错。除非你自己手动给Vue实例加了this.$a = 'xxx'，但这种做法不推荐，容易和Vue的内置API冲突。

关于{{ data }} vs {{ $data }} #

这俩的区别更关键，得仔细看：

• {{ data }}取决于你是否在data里定义了data属性：如果你没在data里写data: 'xxx'，那模板里写{{ data }}会直接报错，因为Vue找不到这个变量；但如果你在data里定义了data字段，比如：

  new Vue({
    data: {
      a: "myData",
      data: "我是自定义的data属性"
    }
  });
  

  这时候{{ data }}就会输出我是自定义的data属性。
• {{ $data }}是Vue实例的内置属性：它固定指向整个data对象本身，不管你有没有定义data这个字段，{{ $data }}都会输出完整的data对象内容。比如你示例里的代码，{{ $data }}会输出{ a: "myData" }，你也可以用{{ $data.a }}来访问a的值，效果和{{ a }}一样，但没必要多写$data.。

总结一下 #

1. 访问data里的普通属性，直接写属性名（比如{{ a }}）就对了，别画蛇添足加$。
2. 以$开头的都是Vue官方提供的内置实例属性/方法，用来操作Vue实例本身或者访问内置数据，比如$data、$refs、$router这些。
3. 尽量不要自己定义以$开头的属性，避免和Vue的内置API冲突。

内容的提问来源于stack exchange，提问作者pedro_pmda