Vue的双向数据绑定是通过“数据劫持”结合“发布者-订阅者”模式的方式实现的,其核心是利用了JavaScript的Object.defineProperty()
方法来劫持各个属性的setter
和getter
。当数据发生变化时,setter
方法会被触发,从而通知订阅者(即视图层)更新;同时,当视图层的数据(如用户输入)发生变化时,也会通过相应的机制更新到数据模型层。
文末有我帮助400多位同学成功领取到前端offer的面试综合题哦,包含了工程化,场景题,八股文,简历模板,等等
以下是Vue双向数据绑定实现的具体步骤:
- 数据劫持:通过
Object.defineProperty()
为数据对象的每个属性设置getter
和setter
。当访问或修改对象的某个属性时,会触发相应的getter
或setter
方法。 - 依赖收集:在模板编译的过程中,Vue会解析模板中的指令(如
v-model
),找到对应的数据依赖,并建立视图与数据的映射关系。同时,将视图层作为订阅者添加到数据属性的订阅列表中。 - 数据变化触发更新:当数据发生变化时(如通过JavaScript代码直接修改数据),会触发
setter
方法。在sett