浅析vue数据绑定

网络编程 2025/1/16 佚名

3 2 1

前言：最近团队需要做一个分享，脚进脑子，不知如何分享。最后想着之前一直想研究一下 vue 源码，今天刚好 “借此机会” 研究一下。

网上研究vue数据绑定的文章已经非常多了，但是自己写一遍，敲一遍demo和看别人的文章是完全不同的，so……搬运工来了

目前数据绑定主要有以下三种实现方式：

1. 脏值检查（angular.js）轮询检测数据变化

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )

XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()

2、Object.defineProperty劫持对象的get、set，从而实现对数据的监控。（vue）

3、发布／订阅者模式实现数据与视图的自动同步

Object.defineProperty的优点

“脏值检测”——数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现
Object.defineProperty() 监控对数据的操作，可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

Object.defineProperty的用法

var a = {};"b", {"我被赋值了！" + newValue);"我被取值了！");"color: #ff0000">数据绑定原理：
1、实现一个数据监听器Observer，对数据对象的所有属性进行监听，如有变动则拿到最新值并通知 dep数组
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据
3、实现一个dep数组 ，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，更新视图
1. 实现observer


var data = {name: 'beidan'};"htmlcode">

function defineReactive(data, key, val) {"color: #000000">2. 维护一个数组


function Dep() {"htmlcode">

bindText: function () {"https://github.com/beidan/vue_bind">https://github.com/beidan/vue_bind
参考链接：
https://www.jb51.net/article/103297.htm
https://www.jb51.net/article/99129.htm
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

                                
                                
                                    vue,数据,绑定 
                                
                                    标签：
                                        vue,数据,绑定
                                     

                            
                        
                        
                            
                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            
                        
                        
                            
                                
                                    上一篇
                                    JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
                                
                            
                            
                                
                                    下一篇
                                    JavaScript使用正则表达式获取全部分组内容的方法示例
                                
                            
                        
                        
                        
                            
                                
                                
                                    评论“浅析vue数据绑定”
                                
                            
                            
                                
                                    
                                        
                                            
                                                浅析vue数据绑定
                                            
                                            
                                                
                                            
                                            
                                                
                                                
                                                
                                            
                                            
                                        
                                    
                                    
                                    
                                        暂无“浅析vue数据绑定”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2025年01月16日

浅析vue数据绑定

vue,数据,绑定

JavaScript中英文字符长度统计方法示例【按照中文占2个字符】

JavaScript使用正则表达式获取全部分组内容的方法示例

评论“浅析vue数据绑定”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接