v-model双向绑定原理

v-model本质上是 :value和v-on的结合体,就是绑定他的value,通过v-on触发,从而更新数据

双向绑定得的实现主要依赖于Object.defineProperty(),通过这个函数可以监听到get,set事件


其中observer是最主要的部分,用Object.defineProperty来实现数据的劫持,然后用他的set,get方法来通知订阅者,触发update方法,从而实现更新视图


订阅者模式:每一个{{name}} v-model=‘name’都会添加一个订阅者,从而监听不同部分的变化,每一部分变化时都会循环触发相应的订阅者,更新到页面中。

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

相关阅读更多精彩内容

  • 原理 MVVM 通过Object.defineProperty( )对属性设置一个set函数,当数据改变了就会来触...
    随便娶个名字阅读 7,097评论 0 0
  • vue理解浅谈 一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点...
    ndxs2008阅读 24,342评论 2 18
  • 双向绑定如何实现: 1、我们需要一个方法来识别视图中哪个元素被设置了双向绑定。 2、我们需要监视视图和数据的变化。...
    LoveBugs_King阅读 1,626评论 1 3
  • 前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了...
    指尖跳动阅读 8,022评论 0 16
  • 建设优秀校园文化 提升学校管理品位 金塔县第四中学 我校坚持“内涵发展、特色发展、均衡发展、全面发展”的办学理...
    ae31f69f1bec阅读 257评论 0 0

友情链接更多精彩内容