数据绑定原理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了数据绑定原理相关的知识,希望对你有一定的参考价值。

数据绑定的常用方法

1. 发布订阅 + 事件监听

扫描dom模板,编译dom模板,得到对于的发布订阅函数,生成对应的dom元素,赋值和取值基于函数,代表knockoutjs

2. 脏值检查

通过对比数据是否有变更,来决定视图是否更新。例如angular.js,会在特定事件触发下,进行脏值检查,
例如:
DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()

3. 数据劫持

基于Object.defineProperty()的set和get方法对数据属性进行劫持,赋值时执行set方法,取值时执行get方法。
利用发布订阅的方式执行dom更新,代表vue.js

以上是关于数据绑定原理的主要内容,如果未能解决你的问题,请参考以下文章

理解VUE2双向数据绑定原理和实现

vue中数据双向绑定的原理是啥?

vue2.x双向数据绑定原理

前端面试被问到,vue实现数据双向绑定,原理是什么

vue数据双向绑定原理

vue数据双向绑定原理