用 reactive oo 象的封

我不定是否是普遍的用法，但我 reactive 非常合用建立似 OO 的封。

reactive把 refs 展平，所以可以：

function useClient() { const name = ref('Alice') const greeting = computed(() => `Hello ${name.value}`) function updateName(newName: string) { name.value = newName } return reactive({ name, greeting, updateName }) } 

在 component ：

const client = useClient() client.greeting // => 'Hello Alice' client.updateName('Bob') client.greeting // => 'Hello Bob' 

在client管理它自己的，其暴露的接口可以直接用在模板。

我也可以合些象和保留性：

function useOrder(client: ReturnType<typeof useClient>) { const createdBy = computed(() => `Created by ${client.name}`) // 你也可以在用 client.updateName return reactive({ createdBy }) } const client = useClient() const order = useOrder(client) order.createdBy // => 'Created by Alice' client.updateName('Bob') order.createdBy // => 'Created by Bob' 

我得是 vue 相於其他特的性，我只需要一象，而它有自己的和方法。

在中，些象一般基於後端，我可以在後端的基上展和方法。

async function useOrder(client: ReturnType<typeof useClient>) { const orderData = reactive(await fetchOrderData()) const paid = ref(false) async function pay() { const res = await paymentAPI() paid.value = res.success } return reactive({ ...toRefs(orderData), // 所有 orderData 的性被暴露 // 我需要 toRefs 保持性 paid, pay }) } 

在定一 order ，我可以直接在模板定order.paid 和order.pay。

本帖在 reddit 上的版本： https://www.reddit.com/r/vuejs/comments/1owezu4/reactive_as_an_object_encapsulation/