Vue双向绑定原理。

最新推荐文章于 2024-07-19 18:41:59 发布

WHITE‘

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量51

点赞数

文章标签： vue.js 前端 javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_67685218/article/details/130638323

版权

Vue的双向绑定原理利用ES5的Object.defineproperty进行数据劫持(监听)data属性的getter和setter，监测到数据的读取和改变，从而去通知订阅者，是否需要更新数据，若需要则会执行更新的函数执行最新数据。

双向绑定的实现步骤

1、实现一个Observe，用来劫持并监听所有属性数据，如果数据发生了变化，就通知订阅者。

2、实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，Watcher可以收到属性的变化

通知并且执行相应的函数，从而更新视图。

3、实现一个解析器Compile，可以扫描和解析每个节点相关指令（v-model，v-on）等指令，如果节点存在v-model，v-on等指令。则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（watcher）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue双向绑定原理。

3、实现一个解析器Compile，可以扫描和解析每个节点相关指令（v-model，v-on）等指令，如果节点存在v-model，v-on等指令。Vue的双向绑定原理利用ES5的Object.defineproperty进行数据劫持(监听)data属性的getter和setter，监测到数据的读取和改变，从而去通知订阅者，是否需要更新数据，若需要则会执行更新的函数执行最新数据。2、实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，Watcher可以收到属性的变化。
复制链接

扫一扫

WHITE‘ CSDN认证博客专家 CSDN认证企业博客

码龄2年

10: 原创

109万+: 周排名

68万+: 总排名

4006: 访问

: 等级

100: 积分

0: 粉丝

1: 获赞

2: 评论

2: 收藏

私信

关注

热门文章

最新评论

history模式&hash模式
CSDN-Ada助手: 恭喜您写了第10篇博客，标题“history模式&hash模式”非常吸引人。我认为下一步您可以考虑探讨更深入的技术细节，或者分享一些实践经验。谢谢您的分享，期待更多有价值的内容。 CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply10 看奖励名单。
前端的优化有哪些
CSDN-Ada助手: 恭喜您写了一篇非常有价值的博客！前端的优化确实是一个非常重要的话题，特别是在如今快速发展的互联网时代。不过，我认为在下一篇博客中，您可以进一步探讨一些实践性的优化技巧，例如如何优化页面加载速度、如何减少HTTP请求等等。期待您的下一篇精彩博客！ CSDN 会根据你创作的博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply9 看奖励名单。
Vue双向绑定原理。
CSDN-Ada助手: 非常感谢用户分享的这篇关于Vue双向绑定原理的博客，读完之后对Vue的理解更加深入了。祝贺用户持续创作，希望用户能够继续分享更多关于Vue的知识，例如Vue组件化、Vue路由、Vue插件等等，让更多的人受益。同时也欢迎用户分享自己的Vue实践经验，相信这将对大家都有很大的帮助。再次感谢用户的分享。 CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。
闭包的优缺点以及内存泄漏
CSDN-Ada助手: 非常感谢用户分享这篇关于闭包的优缺点以及内存泄漏的博客，对于深入理解JavaScript编程语言起到了很好的指导作用。持续创作不易，祝贺用户能够一直保持这样的创作热情和动力。建议用户在下一篇博客中，可以分享一些关于如何避免内存泄漏的实用技巧或者深度剖析JavaScript中的一些核心概念，帮助更多的读者能够更好地掌握这门编程语言。期待用户未来更多的创作！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
对于闭包的解析理解
CSDN-Ada助手: 恭喜你写了第一篇博客！对于闭包的解析理解，这是一个很好的话题，期待看到更多你的深入探讨和解析。虽然闭包是一个相对高级的概念，但是你的解析写得很清晰易懂，让读者可以快速理解。继续加油，期待你的下一篇文章！推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1

大家在看

最新文章

目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。