原生操作dom更新view数据

操作dom更新视图,前端对服务器数据操作渲染dom,用户产生事件后,获取dom(document.getElementBy…)操作更新。

双向数据绑定

起初

前端使用mv*模式,获取服务端数据进行渲染,展现在视图是,每次数据有变更,我们会再次渲染,从而更新视图。页面也会通过交互,产生状态,数据变化,然后将视图数据更新同步数据;如图:

MV*与MVVM

不同的mv*框架处理数据也不同,在backbone中,M(model)和V(view)的数据传递,可在V中监听M的change事件,每次更新M,V中重新执行render,当然也可以监听V的事件来改变V并且将数据发送到M,达到两边监听事件。

angular(MVVM)相比backbone责更底部解决监听问题,从框架层面支持两边数据同步且双向数据绑定

Angular

angular采用”脏值检测”的方式绑定所有数据和视图的检测,监听是否有数据发生变化,如有变化进行处理但可能进一步引发其他数据的改变,所有在ng在处理的过程中或有几次循环检测(ng1存在此问题),一直到不在有数据发生变化。将更新的数据渲染到视图,如是手动修改viewModel的数据变更。为了确保能同步到视图,需要手动调用一次“脏值检查”($apply()方法触发);

angular1.x与angular2.x变更非常大,优化了脏值检测机制。对于angular2之后再详细说明这里就不在深究

Vue

vue则使用了ES5提供的Object.defineProperty方法监控数据的操作,从而可以自动触发数据同步,且因为在不同的数据上触发同步就可以精准的将变更发送给绑定的视图,而不是对所有数据都执行一次检查。

数据与视图绑定与同步,体现在对数据读写处理过程中也就是Object.defineProperty定义set,get函数,vue实现的函数为defineReactive

vue中的Watcher(数据观察者) 负责将新数据发送给视图。

React

react采用了模拟dom树更新,从双向绑定思路上说,react没有单纯从数据绑定也就谈不上双向数据绑定。

react属性和结构更新,都有组件自己模拟一个dom,然后将dom插入真实的dom树中。而且必须通过state更新状态。