Vue Options API中硬编码类属性的作用及实用场景疑问

先搞清楚：你在export default里直接写的var_B，是组件选项对象的自定义属性，不属于Vue响应式系统管理的范畴，所以不能直接用this.var_B或者模板里直接写var_B访问，得用this.$options.var_B（方法里）或者$options.var_B（模板里）才能拿到值。

为啥Vue允许这么写？ #

Vue的组件选项本质就是个普通JS对象，官方没限制你只能用它预设的那些选项（比如data、methods）——这是框架留的灵活性，让你能根据自己的需求扩展组件配置。

有啥实用场景？ #

这种自定义属性适合放不需要响应式的静态数据/配置，常见的用法有：

• 固定配置常量：比如组件默认的分页条数、接口请求的固定前缀、状态枚举值这些，不会随业务逻辑变的东西，放这儿比放data里更合适——毕竟data里的东西会被Vue做响应式处理，静态值没必要浪费那性能。
• 生命周期钩子共享数据：如果多个生命周期钩子（比如created、mounted）都要用同一个静态值，放组件选项里就不用重复定义了。
• 组件内部小工具函数：一些不需要碰响应式数据的纯工具方法，简单场景下也可以直接挂在选项上（复杂场景还是建议用mixins或者单独的工具文件）。

修正后的示例代码 #

要是想正确访问var_B，可以这么改：

<script>
export default {
  var_B: 10,
  data() {
    return {
      var_A: 9, 
    };
  },
  methods: {
    double() {
      // 用this.$options访问自定义属性
      this.var_A = this.var_A * this.$options.var_B;
    },
  },
};
</script>

<template>
  <div>Variable A: {{ var_A }}</div>
  <!-- 模板里用$options访问 -->
  <div>Variable B: {{ $options.var_B }}</div>
  <button @click="double">Try to Double var_A</button>
</template>

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