前端八股整理｜VUE｜高频小题 01

1.proxy的原理了解过吗，是怎么用它实现数据响应式的?proxy的缺点?

Proxy 是 JS 提供的一个"代理器"。不直接操作原对象，而是操作它的代理对象；当你读、写、删、判断属性时，Proxy 可以先拦截一下。

比如有一个对象:

javascript 复制代码

const user = {
  name: 'xiao',
  age: 18
}

正常情况下你这么访问：

javascript 复制代码

console.log(user.name)
user.age = 20

如果给它套一层 Proxy:

javascript 复制代码

const proxyUser = new Proxy(user, {
  get(target, key) {
    console.log('有人读取了', key)
    return target[key]
  },
  set(target, key, value) {
    console.log('有人修改了', key, value)
    target[key] = value
    return true
  }
})

此时再操作,就会先进入你写的 get 和 set。

javascript 复制代码

console.log(proxyUser.name)
proxyUser.age = 20

1.1 proxy的原理

proxy的原理,通过语言层面提供的拦截机制，把对对象的操作劫持下来,在你读取或者修改这个数据的时候,先给到代理对象.代理对象有 get 或者 set 方法去操作这个对象

new Proxy(obj, {handler})

obj 就是你要代理的对象
handler 就是一些操作处理,比如 get set

get set 方法中存在target, key, value

target 就是代理的对象
key 修改或者访问的属性名
value 就是修改的属性值

javascript 复制代码

const obj = { name: 'xiao', age: 18 }
const p = new Proxy(obj, { ... })
                          
p.age = 20
//target 就是 obj
//key 就是 age
// value 就是 20
//这是都是自动的

1.2 怎么用proxy实现数据响应式

get 时收集依赖，set 时触发更新

Vue3 利用 Proxy 对对象进行代理，本质上是拦截对象的读取和修改行为。读取属性时会触发 get，Vue 会在这里做依赖收集，记录当前属性被哪些副作用函数使用了；修改属性时会触发 set，Vue 会找到之前收集到的依赖并触发它们重新执行。这样数据一变，依赖它的渲染逻辑就会重新运行，页面也就跟着更新了。所以 Proxy 只是拦截手段，真正实现响应式的关键是 get 时收集依赖，set 时触发更新。

1.3 proxy的缺点

兼容性不如 Object.defineProperty
Proxy 不是把原对象本身"改造"了，而是在原对象外面套了一层代理壳,所以它不是吧 obj变成了自带响应式的对象,如果把原对象传来传去会绕开响应式
解构后可能丢响应式,基于 Proxy 做响应式时常见的坑

javascript 复制代码

const state = reactive({ count: 0 })
const { count } = state

这时候 count 就变成普通值了，不再走代理。

所以会出现：

直接用 state.count 有响应式
解构出来后没响应式

1.4 ref和reactive的区别

reactive 底层核心是基于 Proxy 实现的，它适合直接代理对象，通过拦截对象属性的读取和修改来完成依赖收集和触发更新。

而 ref 更适合基本类型，它不是直接对基本类型做 Proxy，因为 Proxy 只能代理对象。ref 的思路是把值包装成一个带 value 属性的对象，再让这个对象具备响应式能力，所以使用时需要通过 .value 访问。

所以在用reactive 的时候不用.value,但是 ref 需要