vue双向绑定原理

首先我们需要了解什么是mvvm


image.png

数据model和视图view通过modelview链接
当输入框内容变化时,data 中的数据同步变化。即 view => model 的变化。
当data 中的数据变化时,文本节点的内容同步变化。即 model => view 的变化。
这样便实现了双向数据绑定

在vue内部逻辑中通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。
对于Object.defineProperty() mdn上有如下描述

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

简单来说 双向绑定使用的就是

VueJS则使用ES5提供的访问器属性object. defineProperty()方法,监控对数据的操作,0bj ect . def ineProperty方法第一个参数是要设置的对象,第二个参数是要对象的属性,第三个参数是一个对象, 里面有set和get方法,当设置属性值或者获取属性值的时候就会执行这个set, get方法。

vue就是通过set方法,做到vue数据变更时,同时渲染页面数据。

vue也会给dom对象绑定事件,这样页面数据变更时,也会对应的修改data.

而这一模式我们称之为订阅者模式

所谓订阅者模式就是实际的类似微博或者b站等订阅关注的模式,在vue中含有一个watcher用来实现订阅者模式。
通俗来讲就是,这个watcher实现了b站的服务器一部分功能,当用户(compile)订阅了up主,那么会将此消息,通知给服务器(watcher),服务器(watcher)则会为up主(observer)添加一个订阅者(compile),而当up主(observer)更新新视频的时候就会讲视频通过站内提醒和手机提示等方式推送给订阅者(compile),这样形成了up主和粉丝之间的同步关联。
当然真正的订阅者模式的解释,要比以上复杂的多,涉及很多vue底层逻辑,可以参考:剖析Vue原理&实现双向绑定MVVM

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

相关阅读更多精彩内容

友情链接更多精彩内容