面试题：在 Vue 中，如果变量名以 _ 或 $ 开头，会有什么问题？如何访问到这些值？

在 Vue 中，变量名以 _ 或 $ 开头时，可能会遇到以下问题：

1. Vue 实例属性的冲突

Vue 实例本身有一些以 $ 和 _ 开头的内置属性和方法，用于内部实现或提供公共 API。
- $ 开头的属性通常是 Vue 提供的公共 API，如 $refs、$emit 等。
- _ 开头的属性通常是 Vue 内部使用的私有属性，如 _uid、_watcher 等。
如果你在 Vue 实例中定义以 $ 或 _ 开头的变量，可能会与这些内置属性冲突，导致意外行为。

2. 模板中的访问限制

在 Vue 模板中，Vue 会过滤掉以 _ 或 $ 开头的属性，因此无法直接在模板中访问这些变量。
例如，如果你定义了一个变量 _privateData 或 $publicData，在模板中使用 {{ _privateData }} 或 {{ $publicData }} 时，Vue 会忽略它们。

如何访问这些值？

虽然 Vue 限制了在模板中直接访问这些变量，但你仍然可以通过 JavaScript 代码访问它们。

1. 在 JavaScript 中访问

在 Vue 组件的 data、methods、computed 等选项中，你可以直接通过 this._privateData 或 this.$publicData 访问这些变量。

例如：

export default {
  data() {
    return {
      _privateData: '私有数据',
      $publicData: '公共数据'
    };
  },
  methods: {
    showData() {
      console.log(this._privateData); // 输出: 私有数据
      console.log(this.$publicData); // 输出: 公共数据
    }
  }
};

2. 在模板中间接访问

如果你需要在模板中使用这些变量，可以通过计算属性或方法间接暴露它们。

例如：

export default {
  data() {
    return {
      _privateData: '私有数据',
      $publicData: '公共数据'
    };
  },
  computed: {
    privateData() {
      return this._privateData;
    },
    publicData() {
      return this.$publicData;
    }
  }
};

然后在模板中使用计算属性：

<template>
  <div>
    {{ privateData }} <!-- 输出: 私有数据 -->
    {{ publicData }}  <!-- 输出: 公共数据 -->
  </div>
</template>

总结

避免在 Vue 中使用 _ 或 $ 开头的变量名，除非你有充分的理由并且清楚潜在的风险。
如果确实需要使用这些变量，可以通过 JavaScript 直接访问，或通过计算属性、方法间接暴露给模板。

THE END

Vue 基础面试题