Vue.js 是一款流行的前端框架，其核心特性之一是数据响应式。通过使用 Object.defineProperty()，Vue 实现了对数据的劫持，创建数据依赖收集器（dep）。在模板编译阶段，对每个 v-model 或其他指令的数据建立订阅者，当数据变更时，setter 触发 dep 通知所有订阅者执行 update 方法，从而实现视图的更新。这一机制确保了数据变化和视图更新的一致性。
原理
vue.js是采用数据劫持结合发布者-订阅者的模式的方法，通过Object.defineProperty()来劫持各个属性的Getter、setter，在数据变动时发送消息给订阅者。
实现的整个流程
首先为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者，v-model就会添加一个订阅者，接着为input添加监听事件，修改值就会为该属性赋值，触发该属性的set方法，在 set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。
OK 这样回答就非常完美了
扫一扫
3305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
