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

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

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

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

比如有一个对象:

constuser={name:'xiao',age:18}

正常情况下你这么访问：

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

如果给它套一层 Proxy:

constproxyUser=newProxy(user,{get(target,key){console.log('有人读取了',key)returntarget[key]},set(target,key,value){console.log('有人修改了',key,value)target[key]=valuereturntrue}})

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

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 就是修改的属性值

constobj={name:'xiao',age:18}constp=newProxy(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 做响应式时常见的坑

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

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

所以会出现：

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

1.4 ref和reactive的区别

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

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

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