在 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 方法,
当对代理对象进行读取或修改时,会触发相应的方法,并输出相应的日志信息。