Vue3 响应式原理是面试重点,不仅要说出用了 Proxy,还要讲清“依赖收集”和“触发更新”的完整流程,体现对底层逻辑的理解。
核心答案要点:
Vue3 响应式的核心是「Proxy + 依赖收集 + 触发更新」,具体流程如下:
一、代理对象
使用 Proxy 对数据(对象/数组)进行代理,拦截 get(读取属性)、set(修改属性)、has(判断属性是否存在)、deleteProperty(删除属性)等操作。
二、依赖收集
当组件渲染时,会读取响应式数据,此时触发 Proxy 的 get 拦截器,调用 track() 方法,收集当前组件的 effect(副作用函数,即组件渲染函数),建立“数据-effect”的映射关系。
三、触发更新
当响应式数据被修改时,触发 Proxy 的 set 拦截器,调用 trigger() 方法,找到该数据对应的所有 effect,执行这些 effect,从而触发组件重新渲染。
补充亮点:Proxy 相比 Vue2 的 Object.defineProperty,无需遍历对象所有属性,能直接代理整个对象,且支持监听新增属性、删除属性和数组变化,兼容性上需注意不支持 IE 浏览器。
——个人观点 · 仅供参考——