前端面试题之vue2响应式原理

2023-2-1记录

Vue2的响应式原理 核心是通过 ES5 的 Object.defineProperty 进行数据劫持 然后利用 get 和 set 方法进行数据的获取和设置 这时的data中声明的属性都将被添加到 get 和 set 中

当读取data中的数据时 自动调用 get 方法; 当修改数据时 或者数据发生改变时 自动调用 set 方法 去侦听检测数据的变化 同时会通知 观察者 Wacher 自动重新触发 render 当前组件 (子组件不会重新渲染) 生成新的虚拟 DOM 树 Vue的框架会遍历并对比新旧虚拟DOM树上面的每个节点的差别 并记录下来 最后加载操作 将所有记录下来的节点 局部修改到真实的DOM树上。

请登录后发表评论