Vue 3中能否在reactive对象内声明函数？该写法是否有问题？

这种写法本身不会导致功能故障，但属于Vue不推荐的实践，主要问题如下：

• 违背reactive的设计初衷：reactive的核心作用是包装响应式状态数据，方法属于业务操作逻辑，将二者混在一起不符合Vue的代码组织规范。官方推荐把状态和操作逻辑分离，让职责更清晰。

• 方法无响应式意义：reactive只会对对象内的数据属性创建响应式代理，内部的方法不会被处理成响应式的——方法本身不会触发视图更新，只有操作响应式数据时才会。把方法放在reactive里完全是冗余操作，还会增加对象复杂度。

• 存在this指向风险：当前直接调用state.add('foo')时this能正确指向reactive对象，但如果把方法单独解构出来使用（比如作为回调传递），this会丢失指向，导致无法访问内部的响应式数据：

  const { add } = state;
  add('bar'); // 严格模式下this为undefined，会报错无法读取names
  

• 可维护性下降：随着业务逻辑增多，reactive对象会同时包含大量状态和方法，变得臃肿杂乱，后续难以快速区分数据与操作逻辑，增加维护成本。

推荐写法 #

遵循Vue的代码组织原则，将状态与方法分离：

import { reactive } from 'vue';

// 响应式状态单独管理
const state = reactive({
  names: [] as string[]
});

// 操作逻辑单独声明
const addName = (name: string): void => {
  state.names.push(name);
};

// 调用方法
addName('foo');

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