vue3中proxy关键词

在 Vue3 中，proxy 是一种新的 JavaScript 特性，用于创建一个代理对象，对代理对象的访问会通过 get 和 set 等方法拦截，
从而可以对代理对象进行一些自定义的处理逻辑。在 Vue3 中，我们可以使用 reactive 函数将一个普通对象转换成响应式对象，
而这个响应式对象就是使用 proxy 实现的。下面是 proxy 的用法示例：

<template>
    <div>
      <p>this is a proxy demo~</p>
    </div>
</template>

<script setup>
    const original = { count: 0 }
    const proxy = new Proxy(original, {
        get(target, key, receiver) {
            console.log(`proxy:getting ${key}  ...`)
            return Reflect.get(target, key, receiver)
        },
        set(target, key, value, receiver) {
            console.log(`proxy:setting ${key} to ${value}  ...`)
            return Reflect.set(target, key, value, receiver)
        }
    })

    console.log('proxy-count',proxy.count) // 输出 "getting count..."
    proxy.count = 1 // 输出 "setting count to 1..."

</script>

<style>
</style>

在上述代码中，我们使用 new Proxy() 创建了一个代理对象 proxy，然后重写了 get 和 set 方法，
当对代理对象进行读取或修改时，会触发相应的方法，并输出相应的日志信息。