vue3中proxy关键词

发布时间 2023-04-03 09:36:33作者: 盘思动

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