vue双向绑定原理

133 阅读2分钟

使用场景:

1.表单输入

2.动态更新视图:当从服务端或者其他地方获取到数据后,想立刻在界面上显示最新结果时,可以使用双向绑定

3.状态管理:在复杂的前端项目中,经常需要处理大量的状态,包括全局状态和组件间共享的状态。通过使用Vuex等状态管理工具,可以实现对状态的集中管理和控制,提高开发效率。双向绑定可以确保UI与状态之间的同步更新。

原理:通过数据劫持和发布订阅模式实现

实现过程

首先,vue通过 Object.defineProerty()方法对数据进行劫持,监听数据的变化,通过getter和 setter方法对数据进行读写

其次,vue通过发布订阅模式,维护了一个订阅者数组,当数据发生变化时,vue会通知所有订阅者进行更新

因此当用户在页面上进行修改的时候 ,vue会更新对应的数据,并通知所有订阅者更新视图

同时当数据发生变化时,vue也会更新对应的视图

通过这样的机制,vue实现了双向数据绑定,使得数据和视图的变化可以相互影响

订阅者

订阅者是vue中的一个概念,是一个用于管理更新视图的对象,当数据发生变化时,vue会通知所有的订阅者进行更新,在vue总每一个挂载在视图上的组件 或者 每一个 watcher,都可以被看作是一个订阅者,他们订阅了某一个数据的变化,并等待数据发生变化时进行更新

订阅者是vue实现双向数据绑定的关键组成部分,管理着数据和视图之间的关系,保证了数据的变化能够及时反应到视图上