探究vue双向绑定原理

双向绑定就是数据和视图的双向绑定,数据变化更新视图,视图变化更新数据

视图变化更新数据,我们可以通过监听页面上的DOM事件,从而去修改数据

数据变化更新视图,首先进行数据劫持,使得我们能够感知到数据的变化;感知到数据的变化后,通知它的订阅者,订阅者执行更新函数,进而更新视图

订阅者是如何形成的呢?它是通过Compile解析器来实现的,解析器扫描每个节点,将相关指令初始化为一个订阅者Watcher,当然解析器在这个过程中还进行了其他操作,例如更换模板数据、绑定函数等

Observer观察者劫持data对象所有数据,监听数据变动;Compile解析器对每个节点进行解析,提取模板中的各种指令,获取数据对象,将数据更换到模板中,对视图进行初始化渲染,同时将更新视图的函数传递给订阅者;因为一个数据可能不止被用了一次,也就是它可能有多个订阅者,因此我们需要一个数据结构来存储订阅者,它就是Dep,Dep中存储着数据依赖项也就是订阅者,这个过程是在劫持数据对象时get方法中进行的;一旦数据有变动,就进入了set方法,观察者就通知Dep,Dep就通知所有的订阅者,订阅者接收到数据变动后,调用更新函数去更新视图,这就是数据变化更新视图的背后的原理。