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

前端八股整理VUE高频小题 011.proxy的原理了解过吗是怎么用它实现数据响应式的?proxy的缺点?Proxy 是 JS 提供的一个“代理器”。不直接操作原对象而是操作它的代理对象当你读、写、删、判断属性时Proxy 可以先拦截一下。比如有一个对象:constuser{name:xiao,age:18}正常情况下你这么访问console.log(user.name)user.age20如果给它套一层 Proxy:constproxyUsernewProxy(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.age201.1 proxy的原理proxy的原理,通过语言层面提供的拦截机制把对对象的操作劫持下来,在你读取或者修改这个数据的时候,先给到代理对象.代理对象有 get 或者 set 方法去操作这个对象new Proxy(obj, {handler})obj 就是你要代理的对象handler 就是一些操作处理,比如 get setget set 方法中存在target, key, valuetarget 就是代理的对象key 修改或者访问的属性名value 就是修改的属性值constobj{name:xiao,age:18}constpnewProxy(obj,{...})p.age20//target 就是 obj//key 就是 age// value 就是 20//这是都是自动的1.2 怎么用proxy实现数据响应式get 时收集依赖set 时触发更新Vue3 利用 Proxy 对对象进行代理本质上是拦截对象的读取和修改行为。读取属性时会触发 getVue 会在这里做依赖收集记录当前属性被哪些副作用函数使用了修改属性时会触发 setVue 会找到之前收集到的依赖并触发它们重新执行。这样数据一变依赖它的渲染逻辑就会重新运行页面也就跟着更新了。所以 Proxy 只是拦截手段真正实现响应式的关键是get 时收集依赖set 时触发更新。1.3 proxy的缺点兼容性不如 Object.definePropertyProxy 不是把原对象本身“改造”了而是在原对象外面套了一层代理壳,所以它不是吧 obj变成了自带响应式的对象,如果把原对象传来传去会绕开响应式解构后可能丢响应式,基于 Proxy 做响应式时常见的坑conststatereactive({count:0})const{count}state这时候 count 就变成普通值了不再走代理。所以会出现直接用 state.count 有响应式解构出来后没响应式1.4 ref和reactive的区别reactive 底层核心是基于 Proxy 实现的它适合直接代理对象通过拦截对象属性的读取和修改来完成依赖收集和触发更新。而 ref 更适合基本类型它不是直接对基本类型做 Proxy因为 Proxy 只能代理对象。ref 的思路是把值包装成一个带 value 属性的对象再让这个对象具备响应式能力所以使用时需要通过 .value 访问。所以在用reactive 的时候 不用.value,但是 ref 需要