Vue中$options是什么？具体适用场景有哪些？

核心定义 #

$options 是 Vue 实例上的只读属性，存储了实例初始化时传入的所有配置项，同时会自动合并组件继承的 mixin、extends 配置，以及全局注入的通用配置。
你在声明组件时编写的 name、props、methods、data 等官方配置，以及自定义的非官方配置项，最终都会被归集到 $options 中。

常见适用场景 #

1. 获取自定义配置项 #

非 Vue 官方规定的自定义配置项，不会被挂载到 this 实例根属性上，只能通过 $options 读取：

// Vue2 选项式API示例
export default {
  name: 'UserList',
  // 自定义权限配置（非Vue官方API）
  permission: 'user:view',
  created() {
    // 直接取this.permission返回undefined，必须通过$options获取
    console.log(this.$options.permission) // 输出 'user:view'
  }
}

Vue3 组合式API中需要先获取当前实例再读取：

import { getCurrentInstance } from 'vue'

export default {
  permission: 'user:view',
  setup() {
    const instance = getCurrentInstance()
    console.log(instance?.$options.permission) // 输出 'user:view'
  }
}

2. 重置data为初始化默认值 #

需要把响应式数据重置到组件初始状态时，直接调用 $options.data() 即可，无需手动逐个字段赋值：

export default {
  data() {
    return {
      name: '',
      age: 0,
      dept: 'tech'
    }
  },
  methods: {
    resetForm() {
      // 注意调用data时要绑定当前实例上下文，避免内部访问props/全局属性报错
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}

3. 运行时读取组件元属性 #

可以动态获取组件的 props 定义、filters、name 等元配置，用于做通用逻辑封装：

export default {
  props: {
    username: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      required: false
    }
  },
  created() {
    // 自动遍历props配置生成必填项校验规则
    const requiredFields = Object.entries(this.$options.props)
      .filter(([_, config]) => config.required)
      .map(([key]) => key)
    console.log(requiredFields) // 输出 ['username']
  }
}

4. 全局mixin通用逻辑注入 #

配合全局mixin做统一逻辑处理时，可以通过$options读取每个组件的自定义配置，实现差异化处理：

// 全局注册埋点mixin
Vue.mixin({
  created() {
    // 组件配置了埋点事件则自动上报
    if (this.$options.trackEvent) {
      window.trackApi.report(this.$options.trackEvent)
    }
  }
})

// 业务组件直接声明自定义配置即可自动触发埋点
export default {
  name: 'GoodsDetail',
  trackEvent: 'view_goods_detail',
  // 其他业务逻辑...
}

注意事项 #

• $options 是只读属性，不要直接修改内部配置，修改不会生效还会引发不可预期的异常
• $options.data 是组件初始化时的原始函数，不是当前组件的响应式数据，当前响应式数据请从 this.$data 获取

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