Vue响应式原理---双向绑定
一、Vue中的响应式
Vue最独特的特性之一,是其非侵入行的响应式系统。数据模型仅仅是普通的JavaScript对象,而当修改它们时,视图会进行更新。
二、响应式的基本原理—双向绑定
双向绑定,就是把Model
绑定到View
,当我们用JavaScript代码更新Model
时,View
就会自动更新,在单向绑定的基础上,如果用户更新了View
,Model
的数据也会自动更新。
双向绑定由三个重要部分构成:
- 数据层(Model):应用数据及业务逻辑
- 视图层(View):应用的展示效果,各类UI组件
- 业务逻辑层(ViewModel):框架封装的核心,负责将数据与视图关联起来
ViewModel
作用:
- 数据变化更新视图
- 视图变化更新数据
它还有两个主要部分组成:
- 监听器(Observer):对所有数据的属性进行监听
- 解析器(Compiler):对每个节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
双向绑定的基本原理
通过
Object.defineProperty
来实现监听数据的改变和读取(属性中的setter和getter方法)实现数据劫持。观察者模式(发布者 - 订阅者)
观察者(订阅者)Watcher:
update():当事件发生时,具体要做的事情。
目标(发布者)Dep:
(1)subs数组:存储所有的观察者
(2)addSub():添加观察者
(3)notify():当事件发生时,调用所有观察者的update()方法当数据发生改变通过发布者-订阅者模式来进行通知,进行试图更新。
三、响应过程
首先要对数据(data)进行劫持监听,所以需要设置一个监听器Observer,用来监听所有的属性。
如果属性发生变化,需要通知订阅者Watcher,看是否需要更新。因为订阅者有多个,所以需要一个消息订阅器(发布者)Dep(订阅者集合的管理数组)来专门收集这些订阅者,在Observer和Watcher之间进行统一管理。
还需要一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令初始化为一个订阅者Watcher,并替换模板数据或绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。
Vue中的data的每个属性都会被创建一个Dep对象,并且解析el是进行视图的初始化,如果html中有多个地方用到该属性,则每个地方都会生成一个Watcher的实例被放入到该属性对应Dep实例中的subs数组中。当属性发生变化时,Observer监听到属性的改变,然后调用该属性对应的Dep实例的notify()方法,对Dep实例中的数组进行遍历,同时调用遍历出的Watcher实例进行update()方法的调用,进行视图的更新。
总结为以下三个步骤:
1、实现一个监听器Observer,用来劫持并监听所有属性,如果发生变化,就通知订阅者。
2、实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3、实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并据此初始化视图和订阅器Watcher。
参考链接:https://wenku.baidu.com/view/6ca3cedb07a1b0717fd5360cba1aa81144318f24.html
Vue响应式原理---双向绑定相关推荐
- Vue 响应式原理(双向数据绑定) 怎样实现 响应式原理?
Vue 响应式原理(双向数据绑定) 怎样实现 响应式原理? 我们在Vue里面,定义在Data里的属性,叫做响应式属性. 每一个vue组件被创建的时候,同时还有一个对象被创建出来了,这个对象我们是看不到 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 模拟Vue响应式原理
模拟Vue响应式原理 设计模式 发布订阅模式 我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信 号,其他任务可以向 ...
- Vue学习 — Vue响应式原理
一. Object.defineProperty 在学习vue响应式原理之前,必须搞懂 Object.defineProperty. Object.defineProperty(obj, prop, ...
- 【2019 前端进阶之路】深入 Vue 响应式原理,活捉一个 MVVM
作者:江三疯,专注前端开发.欢迎关注公众号前端发动机,第一时间获得作者文章推送,还有各类前端优质文章,致力于成为推动前端成长的引擎. 前言 作为 Vue 面试中的必考题之一,Vue 的响应式原理,想必 ...
- 一篇文章带你吃透VUE响应式原理
本篇响应式原理介绍比较长,全文大概1w+字.虽然内容繁杂,但阅读过后,绝对会让你对vue的响应式有更加深刻的理解. 分块阅读,效果更佳.(建议读者有一定vue使用经验和基础再食用) 首先上图,下面这张 ...
- Vue响应式原理简述
Vue响应式原理简述 依赖技术 图解过程 依赖技术 问题:Vue如何监听data的改变? => 技术:Object.defineProperty函数.在其中的set方法中监听对象属性的改变. 问 ...
- Vue响应式原理Vue中数据的监听
文章目录 Observer理解如上图 Dep「依赖管理」 Watcher理解如上图 总结:Vue响应式原理的核心就是Observer.Dep.Watcher. Vue响应式原理理解以后就知道Vue是怎 ...
- 面试官:说说Vue响应式原理
前言: 经常有面试官会问"你能说说vue的响应式原理吗?很多不明就里的人会说是v-model,其实面试官想问的是vue能实现响应式使用的是JS中的什么API,而且v-model这个属于双向数 ...
最新文章
- HTML的标签描述22
- 一群机器狗亮相MIT,集体后空翻、踢足球,网友:赶紧去看黑镜压压惊
- The request was denied by service delegate (SBMainWorkspace) for reason: Uns
- boost::endian模块实现udt转换的测试程序
- HDU4273(求三维凸包重心到表面的最短距离)
- mongodb上一篇下一篇_如何使用Microsoft office word—上一篇
- 搜matlab代码的网站,LTE小区搜索matlab仿真
- 终端mysql Operation not permitted错误解决方案
- 阿里高级技术专家方法论:如何写复杂业务代码?
- HyperLedger/Fabric JAVA-SDK with 1.1
- mysql数据库管理工具navicat for mysql怎么用
- 添加WhatsApp链接教程
- C语言struct 函数,C语言结构体史上最详细的讲解
- 麦克劳林公式求sin
- 仓库管理系统怎么选?想高效管理仓库的老板,别错过这篇干货!
- Win32 API 函数列表
- 2010.4.24更新 windows 7 x86/x64 应用全面导航(菜鸟老鸟全兼容)
- 品牌管理系统(第一个web项目)
- chrome播放rtsp视频使用vgx插件
- 苹果x支持5g吗_【苹果】曝iPhone12双卡下不支持5G?NO!小白实测支持
热门文章
- 基于PHP+小程序(MINA框架)+Mysql数据库的物业维修报修小程序系统设计与实现
- 还开学吗?多所大学发布“不返校”通知
- 2021年全球与中国净水器行业市场规模及发展前景分析
- mysql 升级到集群_MySQL Yum存储库 安装、升级、集群
- 记录一些关于学习摄影的东西(从入门到放弃)
- data2vec: A General Framework for Self-supervised Learning in Speech,Vision and Language
- github如何实现一个仓库里放置多个项目
- javascript语言简介
- 润乾报表日志文件的配置方法
- jumpserver堡垒机添加管理计算机