vue 的双向绑定的原理
发布日期:2021-11-21 16:35:48
浏览次数:11
分类:技术文章
本文共 482 字,大约阅读时间需要 1 分钟。
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程:
首先要对数据进行劫持监听,所以需要设置一个监听器Observer,用来监听所有属性。如果属性发生变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去执行以下3个步骤,实现数据的双向绑定:
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
转载地址:https://blog.csdn.net/yyychocolate/article/details/108175920 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
留言是一种美德,欢迎回访!
[***.207.175.100]2024年04月22日 19时58分54秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
通过域名获取主机IP -- struct addrinfo
2019-04-27
【C++】算法集锦(8):从两数和问题拓展到一百数和问题
2019-04-27
【C++】算法集锦(9):背包问题
2019-04-27
【C++】算法集锦(10)通俗讲kmp算法
2019-04-27
【C++】算法集锦(12):高楼扔鸡蛋
2019-04-27
【图解】拥塞控制
2019-04-27
线程上下文切换
2019-04-27
什么是服务熔断?
2019-04-27
服务器压力过大?CPU打满?我来帮你快速检查Linux服务器性能
2019-04-27
C++面经总结之《Effective C++》(一)
2019-04-27
C++面经总结之《Effective C++》(二)
2019-04-27
这是什么“虎狼之词”啊!!!程序员的健康问题,看一线老中医怎么说!!!
2019-04-27
打开我的收藏夹 -- Python数据分析杂谈
2019-04-27
上手Pandas,带你玩转数据(1)-- 实例详解pandas数据结构
2019-04-27
上手Pandas,带你玩转数据(2)-- 使用pandas从多种文件中读取数据
2019-04-27
上手Pandas,带你玩转数据(3)-- pandas数据存入文件
2019-04-27
爬虫遇上不让右击、不让F12的网站,该怎么办?
2019-04-27
上手Pandas,带你玩转数据(4)-- 数据清洗
2019-04-27
上手Pandas,带你玩转数据(5)-- 数据转换与数据定位
2019-04-27