VUE双向绑定原理

VUE双向绑定原理是前端小伙伴很难绕过的一道面试题!本篇文章对其原理进行了最大程度的精简,希望对面试VUE开发的前端小伙伴有所帮助!我在这里将指令 v-改为z-,主要完成z-model、z-click、z-text以及z-html四个提令。

为了能够快速读懂代码,首先要先弄明白以下三个概念:

1、观察者(observer):也就是数据监听器,负责数据对象的所有属性进行监听劫持,并将消息发送给订阅者进行数据更新

2、订阅者(watcher):负责接收数据的变化,更新视图(view),数据与订阅者是一对多的关系。

3、解析器(compile):负责对你的每个节点元素指令进行扫描和解析,负责相关指令的数据初始化及创造订阅者

我们实现一个简单的小功能:

html:

.js完整代码如下,不足70行:


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容