"拜拜 .value：我如何魔改 Vue3 的 Ref 功能以适应自己的喜好"

当我们在 Vue3 中使用 ref 创建响应式对象时，我们需要在模板中使用 .value 来访问它的值。这是因为 ref 返回的是一个包含响应式对象的引用，而非响应式对象本身。如果我们省略 .value 直接操作引用，那么这个操作是非响应式的，不会触发视图更新。但是，我们可以通过魔改 ref 的原理，来实现在逻辑操作中省略 .value 的效果。

具体来说，我们可以创建一个新的函数 magicRef，它的实现方式与 ref 的实现方式基本相同，只是在返回值上做了修改。在 magicRef 中，我们会先使用 ref 创建一个响应式对象，然后再创建一个代理对象 proxy，将所有的操作都转发给响应式对象。这样，当我们访问 proxy 的属性时，实际上是在访问响应式对象的 .value 属性。这种方式可以让我们在逻辑操作中省略 .value，并且保持响应式。

下面是一个简单的 magicRef 实现：

function magicRef(initialValue) {
  const reactive = ref(initialValue)
  const proxy = new Proxy(reactive, {
    get(target, key) {
      if (key === 'value') {
        return target.value
      }
      return target.value[key]
    },
    set(target, key, value) {
      if (key === 'value') {
        target.value = value
      } else {
        target.value[key] = value
      }
      return true
    },
  })
  return proxy
}

使用 magicRef 创建响应式对象时，我们可以直接访问它的属性，而无需在模板中添加 .value：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { magicRef } from './magicRef.js'

export default {
  setup() {
    const count = magicRef(0)

    function increment() {
      count++
    }

    return { count, increment }
  },
}
</script>

在上面的例子中，我们使用 magicRef 创建了一个名为 count 的响应式对象。在 increment 函数中，我们可以直接对 count 进行加一操作，而无需访问它的 .value 属性。这个操作会触发视图更新，从而显示新的计数值。

需要注意的是，在使用 magicRef 时，我们仍然可以通过访问 proxy.value 来获取响应式对象的值。同时，如果我们尝试访问 magicRef 返回的对象的 .value 属性，会返回 undefined。这些都是因为我们在代理对象 proxy 中对属性访问和设置进行了转发，而不是直接暴露响应式对象。

除了上述方法，还可以使用 Vue 提供的 toRefs 函数来达到省略 .value 的效果。toRefs 函数可以将一个响应式对象的所有属性转换成响应式引用。这些引用可以直接在模板中使用，并且不需要添加 .value。

下面是一个使用 toRefs 的例子：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
    })

    function increment() {
      state.count++
    }

    return toRefs(state)
  },
}
</script>

在上面的例子中，我们使用 reactive 创建了一个响应式对象 state，其中包含一个名为 count 的属性。在 setup 函数中，我们可以将 state 通过 toRefs 转换成一个包含响应式引用的对象，并返回它。这样，在模板中我们就可以直接使用 count，而无需添加 .value。这个操作会触发视图更新，从而显示新的计数值。

需要注意的是，在使用 toRefs 时，我们必须使用解构赋值或者展开语法来将响应式引用转换成普通变量。例如，下面的语句会将 count 转换成普通变量：

const { count } = toRefs(state)

或者，我们可以使用展开语法来将所有的响应式引用都转换成普通变量：

const vars = { ...toRefs(state) }

在这个例子中，vars.count 就是一个普通变量，可以直接在逻辑操作中使用，而不需要添加 .value。

总之，通过上述两种方式，我们可以实现在逻辑操作中省略 .value 的效果，并保持响应式。这可以让我们在开发 Vue3 应用时更加便捷和灵活。

好了！ 没用的知识又多了一条