前端框架双向数据绑定实现原理

[WeihanLi]

1. angularjs 双向数据绑定实现原理
2. angular 双向数据绑定实现原理
3. vue 双向数据绑定实现原理
4. react 双向数据绑定实现原理

Reference

• https://blog.csdn.net/u011301203/article/details/64941365

[WeihanLi]

angularjs 双向数据绑定实现原理

angularjs 实现双向数据绑定的核心在于它的脏检查机制

angularjs 脏检查有三个概念：

• $watch
• $digest
• $apply

谈起angular的脏检查机制(dirty-checking), 常见的误解就是认为： ng是定时轮询去检查model是否变更。
其实，ng只有在指定事件触发后，才进入$digest cycle：

• DOM事件，譬如用户输入文本，点击按钮等。(ng-click)
• XHR响应事件 ($http)
• 浏览器Location变更事件 ($location)
• Timer事件($timeout, $interval)
• 执行$digest()或$apply()

Reference

• https://www.zhihu.com/question/23275373/answer/34048893
• AngularJS性能优化心得 atian25/blog#5

[WeihanLi]

vue 双向数据绑定实现原理

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

vue 3.x 版本不再使用 Object.defineProperty，转而使用 ES6 中的 Proxy，参考 https://www.cnblogs.com/wonyun/p/11699397.html

Reference

• https://cn.vuejs.org/v2/guide/reactivity.html

[WeihanLi]

angular 双向数据绑定原理

Angular 支持双向数据绑定，这是一种对模板中的各个部件与组件中的各个部件进行协调的机制。 往模板 HTML 中添加绑定标记可以告诉 Angular 该如何连接它们。

下图显示了数据绑定标记的四种形式。每种形式都有一个方向 —— 从组件到 DOM、从 DOM 到组件或双向。

在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。

Angular 在每个 JavaScript 事件循环中处理所有的数据绑定，它会从组件树的根部开始，递归处理全部子组件。

数据绑定在模板及其组件之间的通讯中扮演了非常重要的角色，它对于父组件和子组件之间的通讯也同样重要。

Reference

• https://angular.cn/guide/architecture-components#data-binding

[WeihanLi]

React 数据绑定

• 属性更新，组件自己处理
• 结构更新，重新“渲染”子树（虚拟DOM），找出最小改动步骤，打包DOM操作，给真实DOM树打补丁

单纯从数据绑定来看，React虚拟DOM没有数据绑定，因为setState()不维护上一个状态（状态丢弃），谈不上绑定

从数据更新机制来看，React类似于提供数据模型的方式（必须通过state更新）

Reference

• https://reactjs.org/docs/thinking-in-react.html#step-5-add-inverse-data-flow
• https://reactjs.org/docs/two-way-binding-helpers.html
• https://blog.csdn.net/generon/article/details/72835645