vue shallowRef action

`shallowRef` 是 Vue.js 3 中的一个响应式API，用于创建一个响应式的数据对象。与 `ref` 不同的是，`shallowRef` 只会对传入的对象进行浅层响应式处理，而不会对对象内部的属性进行递归响应式处理。

`action` 是一个函数，通常用于执行一些异步操作或者一些复杂的业务逻辑。在 Vue.js 3 中，我们可以使用 `shallowRef` 来创建一个包含 `action` 函数的响应式对象。当 `action` 函数内部对响应式对象进行修改时，Vue.js 3 会自动追踪这些修改并更新视图。

下面是一个使用 `shallowRef` 创建包含 `action` 函数的响应式对象的示例：

import { shallowRef } from 'vue'

const data = shallowRef({
  count: 0,
  async increment() {
    // 异步操作
    await someAsyncFunction()
    this.count++
  },
  complexLogic() {
    // 复杂的业务逻辑
    // ...
    this.count++
  }
})

// 组件中使用
<template>
  <div>
    <p>Count: {{ data.count }}</p>
    <button @click="data.increment()">Increment</button>
    <button @click="data.complexLogic()">Complex Logic</button>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { data } from './data'

export default {
  setup() {
    onMounted(() => {
      // 异步操作
      data.value.increment()
    })

    return { data }
  }
}
</script>

在上面的示例中，我们创建了一个包含 `count`、`increment` 和 `complexLogic` 属性的响应式对象，并在组件中使用了这个对象。当用户点击“Increment”按钮时，`increment` 函数会异步执行并将 `count` 属性加 1。当用户点击“Complex Logic”按钮时，`complexLogic` 函数会执行一些复杂的业务逻辑，并将 `count` 属性加 1。无论是使用 `increment` 函数还是 `complexLogic` 函数，Vue.js 3 都会自动追踪 `count` 属性的修改并更新视图。