vue3 customRef()注入默认值

可以使用 `customRef` 方法来创建一个响应式的自定义 ref，同时可以通过 `defaultValue` 参数来设置默认值。

例如，下面的代码创建了一个名为 `myRef` 的自定义 ref，其默认值为数字 0：

import { customRef } from 'vue'

const myRef = customRef((track, trigger) => {
  let value = 0

  return {
    get() {
      track()
      return value
    },
    set(newValue) {
      value = newValue
      trigger()
    }
  }
}, {
  defaultValue: 0
})

在上面的代码中，我们使用 `customRef` 方法创建了一个自定义 ref，它接受两个参数：

- `track`：一个函数，用于追踪依赖关系，以便在值发生变化时更新组件。
- `trigger`：一个函数，用于触发更新操作。

在第二个参数中，我们可以设置 `defaultValue` 属性来指定默认值。在上面的例子中，我们将 `defaultValue` 设置为数字 0。

这样，我们就可以在组件中使用 `myRef` 这个响应式的自定义 ref 了。例如：

<template>
  <div>{{ myRef }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myRef = ref({
      name: 'John',
      age: 30
    })

    return {
      myRef
    }
  }
}
</script>

在上面的代码中，我们创建了一个名为 `myRef` 的响应式自定义 ref，并将其作为组件的一个数据属性。在模板中，我们可以直接使用 `myRef` 来显示其值。如果未对 `myRef` 进行任何修改，则其值将保持为默认值。