Vue3 Options API能否使用Composables？Mixin迁移遇困惑

Vue 3的Composables虽主打配合Composition API使用，但完全支持在Options API里调用，你遇到的模板无法访问变量的问题，本质是没把Composable返回的响应式状态挂载到组件实例this上。

问题根源 #

你在created钩子中声明的first和mycomputed是局部变量，不属于组件实例，模板默认只能访问this上的属性，自然无法读取。

解决方法1：直接挂载到组件实例 #

把Composable返回的响应式对象挂载到this，就能在模板和其他钩子中访问：

import useComposables from '@/utils/useComposable'

export default {
  data() {
    return {
      first: null,
      mycomputed: null
    }
  },
  created() {
    const composableState = useComposables()
    // 将响应式状态挂载到组件实例
    this.first = composableState.first
    this.mycomputed = composableState.mycomputed

    console.log('first', this.first.value)
    console.log('mycomputed', this.mycomputed.value)
  }
}

<template>
  <div>mycomputed: {{ mycomputed.value }}</div>
</template>

注意：Options API不会自动解包ref/computed，所以模板中需要通过.value访问实际值。

解决方法2：贴合Options API风格的写法 #

通过computed选项包装Composable返回的计算属性，模板中无需加.value：

import useComposables from '@/utils/useComposable'

export default {
  data() {
    // 缓存Composable实例，避免重复创建状态
    this.composableState = useComposables()
    return {
      first: this.composableState.first
    }
  },
  computed: {
    mycomputed() {
      return this.composableState.mycomputed.value
    }
  },
  created() {
    console.log('first', this.first.value)
    console.log('mycomputed', this.mycomputed)
  }
}

<template>
  <div>mycomputed: {{ mycomputed }}</div>
</template>

这里缓存了Composable实例，避免在data和computed中重复调用导致创建多份独立状态。

关键说明 #

• 官方文档虽重点介绍Composition API与Composables的配合，但从未禁止Options API的用法，只是需要手动处理状态挂载。
• 这种方式非常适合Vue 2到Vue 3的迁移场景，能逐步将Mixin替换为Composables，同时保留现有Options API的代码结构。

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