我不確定這是否是普遍的用法，但我發現 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/