响应式方案

默认整体实例不是响应式，手动指定属性为响应式属性

可以使用 ref/shallowRef/reactive 等 API 将指定属性设置为响应式变量，这样在 vue 组件的 template 中就可以直接消费这些响应式属性。

但是它们都有一个特点就是不能重新直接赋值，直接重新赋值会导致响应式丢失。当然也可以在赋值前再次调用 ref/shallowRef/reactive 这些 API 来保证响应式功能。

优点是没有增加新的概念，全部都是 vue 自身的 API，很容易理解。

缺点是容易无意间丢失响应式能力。另外如果是采用 ref/shallowRef 这些 API，那么就需要面对烦人的ref.value。

import { computed, shallowRef } from 'vue';

export class User {
  private userInfo = shallowRef<{ nickName: string }>();
  public nick = computed(() => {
    return this.userInfo.value?.nickName;
  });
}

默认整体实例是响应式，手动指定属性为 markRaw

本库还是采用了对整个 class 实例对象进行 reactive，然后可以针对部分属性进行 markRaw。

优点是默认所有属性都是响应式的，减少了心智负担。

import { markRaw } from 'vue';
import { Computed } from '@kaokei/use-vue-service';

export class User {
  private userInfo = {} as { nickName: string };

  public bigObject = markRaw(someBigObject);

  @Computed
  public nick() {
    return this.userInfo.value?.nickName;
  }
}

指定 state 属性为响应式属性

也就是服务对象中只有 state 属性是响应式的，其他属性都不是响应式的。

这个方案也是比较不错的，除了在访问属性时，需要多写一个service.state.property。