Vue3 响应式原理,面试官想听的完整答案在这里

0 阅读1分钟

Vue3 响应式原理是面试重点,不仅要说出用了 Proxy,还要讲清“依赖收集”和“触发更新”的完整流程,体现对底层逻辑的理解。

核心答案要点:

Vue3 响应式的核心是「Proxy + 依赖收集 + 触发更新」,具体流程如下:

一、代理对象

使用 Proxy 对数据(对象/数组)进行代理,拦截 get(读取属性)、set(修改属性)、has(判断属性是否存在)、deleteProperty(删除属性)等操作。

二、依赖收集

当组件渲染时,会读取响应式数据,此时触发 Proxy 的 get 拦截器,调用 track() 方法,收集当前组件的 effect(副作用函数,即组件渲染函数),建立“数据-effect”的映射关系。

三、触发更新

当响应式数据被修改时,触发 Proxy 的 set 拦截器,调用 trigger() 方法,找到该数据对应的所有 effect,执行这些 effect,从而触发组件重新渲染。

补充亮点:Proxy 相比 Vue2 的 Object.defineProperty,无需遍历对象所有属性,能直接代理整个对象,且支持监听新增属性、删除属性和数组变化,兼容性上需注意不支持 IE 浏览器。

——个人观点 · 仅供参考——