vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作,在数据变动时做你想要做的事情

我们已经知道实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发生变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令(如v-model,v-on)对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定:

1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

2.实现一个订阅者Watcher,每一个Watcher都绑定一个更新函数,watcher可以收到属性的变化通知并执行相应的函数,从而更新视图。

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

defineProperty在数据劫持后是如何通知数据的更新和视图的更新的的更多相关文章

  1. python数据赋值后,修改新数据,原数据如何保证不被修改?

    python中对象,赋值后是同一地址,如果是可变对象,对其中一个修改会影响到另一个,如果要生成完全新的对象,应使用deepcopyimport copydata1=copy.deepcopy(data ...

  2. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  3. ES6入门:数据劫持、Proxy、Reflect

    什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...

  4. Flutter 初始化数据完成后再加载页面

    一.初始化数据完成后再加载数据 1.为了达成这个目标尝试了多种方法总是失败 在Init 和didChangeDependencies 初始化数据过也不行 @override void didChang ...

  5. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  6. 搞懂:MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

    搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...

  7. Vue之九数据劫持实现MVVM的数据双向绑定

    vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...

  8. Vue 核心之数据劫持

    前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了,它们实现 ...

  9. Vue框架核心之数据劫持

    本文来自网易云社区. 前瞻 当前前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需 ...

  10. Vue核心之数据劫持

    前瞻 当前前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Anglar,Regular,Vue,React等等,它们最大的优点就是可以实现数据绑定,再也不需要手动进行DOM操作了, ...

随机推荐

  1. Error java 错误 不支持发行版本5 ( 完美解决版)

    问题 在Intellij idea中新建了一个Maven项目,运行时报错如下:Error : java 不支持发行版本5 解决方案 1. 原因 是因为ideal中默认配置中有几个地方的jdk版本与实际 ...

  2. [Cisco][GNS3]Install IOU device in GNS3

    1. 下載並安裝GNS3 下載位置 https://gns3.com/software 安裝 gns3-all-in-one 部屬GNS3 VM至virtualbox 下載並安裝VIX API htt ...

  3. CSS3之动画三大特性

    一 过渡模块 1 基本使用 1,过渡三要素1.1必须要有属性发生变化1.2必须告诉系统哪个属性需要执行过渡效果1.3必须告诉系统过渡效果持续时长 2.注意点当多个属性需要同时执行过渡效果时用逗号隔开即 ...

  4. 性能工具---JConsole基于JMX的可视化监视、管理工具

    与visualvm类似: JConsole: (Java Monitoring and Management Console),一种基于JMX的可视化监视.管理工具 VisualVM:(All-in- ...

  5. 深入理解css 笔记(6)

    网格布局:flexbox 彻底改变了网页布局方式,但这只是开始.它还有一个大哥:另一个称作网格布局模块的新规范.这两个规范提供了一种前所未有的全功能布局引擎.跟 flexbox 类似,网格布局也是作用 ...

  6. windows下查找端口、PID、查找进程、杀死进程

    查找端口 netstat -ano|findstr "1099" TCP 0.0.0.0:1099 0.0.0.0:0 LISTENING 10120 TCP [::]:1099 ...

  7. FCARM - Output Name not specified, please check 'Options for Target - Utilit问题

    FCARM - Output Name not specified, please check 'Options for Target - Utilit问题 按照书上说明按步操作,但是书上是按照kei ...

  8. 非常有用的python单行代码

    1 推导式应用 1.1 列表推导式(一行for循环) #For循环在一行 mylist = [200, 300, 400, 500] #正常方式 result = [] for x in mylist ...

  9. 《MySQL是怎样运行的》第六章小结

  10. Python--相关环境的安装,以及hello world的实现

    相关环境 进入官网:https://www.python.org/downloads/ 点击这里: 来到新的界面之后,向下滑动: 找到上图中的界面,选择版本进行下载即可. 具体的安装步骤可以参考这里看 ...