vue3 方法参数变Peoxy

解决方案

在 Vue 3 中，如果想要将方法的参数转换为 Proxy 对象，可以通过多种方式实现。Proxy 可以拦截对目标对象的操作并自定义其行为。下面我们将介绍几种不同的思路来实现这一功能。

1. 直接在方法内部创建 Proxy

这是最直接的方式，在方法内部使用 JavaScript 的 Proxy 构造函数来包装传入的参数。这种方式适合简单的场景。

javascript

  <button>点击我</button>
</p>


import { reactive } from 'vue'

const data = reactive({
  message: 'Hello World'
})

function handleClick(param) {
  const proxyParam = new Proxy(param, {
    get(target, key) {
      console.log(`获取属性 ${key}`)
      return target[key]
    },
    set(target, key, value) {
      console.log(`设置属性 ${key} 为 ${value}`)
      target[key] = value
      return true
    }
  })

  // 使用代理后的参数
  console.log(proxyParam.message)
}


<p>

2. 使用计算属性与 watch 组合

对于更复杂的场景，我们可以结合计算属性和 watch 来监听变化，并返回一个经过处理的 Proxy 对象。

javascript</p>


import { computed, watch, reactive } from 'vue'

const originalData = reactive({
  message: 'Hello World'
})

// 创建一个计算属性返回代理对象
const proxiedData = computed(() => {
  return new Proxy(originalData, {
    get(target, key) {
      console.log(`读取属性 ${key}`)
      return target[key]
    },
    set(target, key, value) {
      console.log(`修改属性 ${key} 为 ${value}`)
      target[key] = value
      return true
    }
  })
})

// 监听原始数据的变化
watch(originalData, (newValue, oldValue) => {
  console.log('数据发生变化:', newValue)
})

function handleClick() {
  // 操作代理对象
  proxiedData.value.message = 'New Message'
}


<p>

3. 使用自定义 hook 函数

为了提高代码复用性，可以将 Proxy 创建逻辑封装成一个自定义 hook 函数。

javascript</p>


import { reactive, toRefs } from 'vue'

// 自定义 hook 函数
function useProxiedObject(initialValue) {
  const state = reactive(initialValue)

  const proxiedState = new Proxy(state, {
    get(target, key) {
      console.log(`读取属性 ${key}`)
      return target[key]
    },
    set(target, key, value) {
      console.log(`修改属性 ${key} 为 ${value}`)
      target[key] = value
      return true
    }
  })

  return {
    ...toRefs(state),
    proxied: proxiedState
  }
}

// 使用自定义 hook
const { proxied, message } = useProxiedObject({ message: 'Hello World' })

function handleClick() {
  proxied.message = 'Updated Message'
}


<p>

以上三种方法都可以实现将 Vue 3 方法中的参数转换为 Proxy 对象。选择哪种方式取决于具体的应用场景和个人偏好：
- 如果只是简单地需要代理某个参数，种方法就足够了
- 如果需要监听数据变化并进行复杂处理，第二种方法更合适
- 如果希望提高代码复用性或项目中有多处需要类似功能，则推荐使用第三种方法

每种方法都有其适用场景，开发者可以根据实际需求灵活选择。同时需要注意的是，在使用 Proxy 时要确保不会因为过度包装而影响性能。