vue数据双向绑定实现原理

52 阅读1分钟

首先需要理清一个概念,就是观察者模式和发布订阅模式之间的区别,一般的我们认为发布订阅模式只是观察者模式的一个别称,只是发布订阅模式,在观察者和被观察者之间加了一层,作为观察者和被观察者的中间层。

要实现双向绑定,需要满足这样几个条件:首先数据是可监听的,其次可以知道有哪些订阅者订阅了该数据。

要做到是一个数据可以被监听。在js中提供了两种方式,可以实现数据改变的可监听。一种就是使用Object.defineProeprty();另外一种就是就是使用ES6的语法Proxy(),给对象的属性做一层get和set代理。

实现了数据的可监听之后,就需要收集哪些观察者订阅了当前数据,这就需要一个依赖收集器,用来收集哪些对象订阅了当前数据的变化。当数据变化的时候,通知到这些订阅者,订阅者内部会实现视图的修改。

这样只是数据到订阅者之间的流动,那从订阅者怎样流到数据呢?就需要对dom元素做监听,这个工作是在模板编译阶段完成的,当input、radio或者checkbox等表单元素或者其他dom元素触发改变事件时,获取到当前的vue实例和当前dom元素上绑定数据的属性,可以知道依赖的是data上的哪个数据,然后对实例中的data相应数据做修改就可以了。

这样,就实现了数据的双向绑定。