vue3中的对象时为proxy对象如何获取值(两种方式)

在Vue3中，数据响应式的实现机制与Vue2中完全不同，采用了ES6中的Proxy对象。Proxy可以拦截对象的读取、赋值、删除等操作，从而使Vue3中的响应式数据更加高效和灵活。

在获取Vue3中的Proxy对象的值时，有两种方式：

1. 直接使用点操作符访问属性

可以和普通的JS对象一样使用点操作符来访问Proxy对象的属性。

const reactiveObject = {
  name: 'Tom',
  age: 18
}

const reactiveProxy = new Proxy(reactiveObject, {

})

console.log(reactiveProxy.name) // 输出 'Tom'
console.log(reactiveProxy.age) // 输出 18

2. 使用Reflect.get()方法获取属性

另一种获取Vue3中Proxy对象的值的方式是使用Reflect对象下的get()方法。

const reactiveObject = {
  name: 'Tom',
  age: 18
}

const reactiveProxy = new Proxy(reactiveObject, {
  get(target, key) {
    console.log(`访问了${key}属性`)
    return Reflect.get(target, key)
  }
})

console.log(reactiveProxy.name) // 输出 '访问了name属性' 和 'Tom'
console.log(reactiveProxy.age) // 输出 '访问了age属性' 和 18

在这个例子中，我们定义了一个get()方法，它在访问Proxy对象的属性时，会打印一条信息，并委托给Reflect对象的get()方法来获取属性的值。

需要注意的是，使用Reflect.get()方法的方式比直接使用点操作符访问属性的方式更加灵活，因为我们可以在get()方法中加入自己的逻辑，实现更加复杂的数据处理和响应式实现。