深入响应式原理

更新日期: 2019-05-27阅读: 2.4k标签: 响应式
说到响应式原理其实就是双向绑定的实现,说到 双向绑定 其实有两个操作,数据变化修改dom,input等文本框修改值的时候修改数据
1. 数据变化 -> 修改dom
2. 通过表单修改value -> 修改数据
先说第一步,数据变化更改DOM的一个前提条件是能够知道数据什么时候变了,像这种需求如果不考虑兼容性的话,用屁股想都知道可以通过 getter 和 setter 来实现,每当触发 setter 的时候更新DOM
但这就引发了一个问题,我们怎么知道当 setter 触发的时候更新哪个DOM?
一个解决思路是,我们先知道哪些dom需要用到数据,当触发 setter 的时候把所有使用到该数据的dom更新
所以我们需要一个收集依赖关系的功能,每当触发 getter 的时候如果是 DOM 中触发的,我把这个 Key 和 DOM 记录起来,这样当这个 Key 触发 setter 的时候,我把这个 Key 所对应的所有 DOM都更新一遍,这样一个简单的单向绑定就实现了
下面说说第二步,其实第二步要比第一步简单的多,以input为例:
<input v-model="name" />
很明显,我只需要使用 getAttribute 方法读取 v-model 拿到的值就是 Key,在通过 input.value 拿到 value,直接就可以用key和value把数据改了

 
可以看到最右侧绿色的圆代表数据,里面紫色的圆代表属性,被属性getter状语从句:setter拦截
有一条黑色虚线指向getter,标注的英文是Collect Dependencies,代表触发getter的时候收集依赖(其实就是把watcher实例推到依赖列表里)
setter处有一条红线指向Watcher,标注是Notify,代表触发setter时,会发送消息到Watcher
看到可以getter与setter的部分与我上面的猜测基本harmony和谐,但是了多个Watcher状语从句:Directive,其实这就是我上面说到的,作为vue来讲,并不是简单的更新DOM就可以了,VUE中有很多指令,不同的指令有不同的更新DOM方式的而Directive就是用来处理这方面的事情用的
中间那那个Watcher的英文个什么鬼?
Watcher先可以暂时理解为房产中介用户买房子找中介,中介帮忙找房主,房主卖房子找中介,中介帮房主把房子卖给用户..............
setter触发消息到Watcherwatcher帮忙告诉Directive更新DOM,DOM中修改了数据Watcher也会通知给,watcher帮忙修改数据
 
看上图,我们上一节讲的是左边的那部分内容,这一节我们讲右边那部分内容
关于编译这块VUE分了两种类型,一种是文本节点,一种是元素节点,如果以最简单的文本节点为例,首先需要知道什么是文本节点?
你好{{name}}
这就是一个文本节点,它包含两部分,字幕:普通节点hello 状语从句:一个特殊的节点{{name}}


第一步
首先第一步VUE会通过正则来解析文本节点,把普通文本节点和特殊节点区分开,解析后大概长下面这样
[{
价值: '你好'
},{
价值: '名字',
tag : true,
html : false,
oneTime : false
}]


第二步
第二步是遍历数组,将所有标签为真正添加的扩展对象,扩展属性包括指令方法
像文本节点的特殊节点只有两种类型,文本和HTML,所以简单判断HTML的值就可以知道,应该给扩展类型添加那种指令的接口
添加扩展对象后大概长成下面的样子
[{
价值: '你好'
},{
价值: '名字',
tag : true,
html : false,
oneTime : false,
描述符: {
def : {
update : function,
bind : function
},
表达式: xx,
filters : xx,
name : 'text'
}
}]

可以看到vue内置了这么多的指令,这些指令都会抛出两个接口bind和update,这两个接口的作用是,编译的最后一步是执行所有用到的指令的绑定方法,而更新方法则是当观察者触发更新时,指令会触发指令的更新方法
观察 - >触发setter - > 观察者 - >触发更新 - > 指令 - >触发更新 - > 指令

 

第三步
第三步的英文将所有tag为true 的数据中的扩展对象拿出来生成一个指令并实例添加到_directives中(_directives是当前VM中存储所有的指令实例的地方)。
这个。
_directives.push(
  新指令(描述符,this,node,host,scope,frag)
)

第四步
循环_directives执行所有指令实例的_bind方法。指令中_绑定方法的作用有几点:
  1. 调用所有已绑定的指令的绑定方法
  2. 实例化一个观察器,将指令的更新与观察者绑定在一起(这样就实现了观察者接收到消息后触发的更新方法,指令可以做出对应的更新视图操作)
  3. 调用指令的更新,首次初始化视图
这里有一个点需要注意一下,化实例Watcher的时候,看守会将自己主动的推入德普依赖中
好了,到这里整体的流程已经结束了,来一段总结吧


总结

响应式原理共有四个部分observe,Dep,watcher,Directive
观察者可以监听数据的变化
Dep可以知道数据变化后通知给谁
Watcher可以做到接收到通知后将执行指令的更新操作
指令可以把Watcher和指令连在一起
不同的指令都会有更新的方法来使用自己的方式更新DOM
必须使用观察家触发吸气,德普才会收集依赖
执行流:
当数据触发setter时,会发消息给所有watcher,watcher会跟执行指令的更新方法来更新视图
当指令在页面上修改了数据会触发守望的一套方法来修改数据


来自:https://www.cnblogs.com/liukaicheng/archive/2019/05/27/10933538.html


链接: https://www.fly63.com/article/detial/3451

移动端web app要使用rem实现自适应布局:font-size的响应式

rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。

使用现代CSS的响应式版面

通过模块化缩放,使用传统属性和calc()来动态缩放你的字体大小.为字体大小使用百分比.给文本内容和媒体查询使用em,针对不同视口尺寸使用不同缩放值.视口越小,缩放比例越小,使用媒体查询或者media()函数基于视口来改变比例和基础字号

web响应式图片的5种实现

在目前的前端开发中,我们经常需要进行响应式的网站开发。本文着重介绍一下弹性图片,也就是响应式图片的解决方案:js或服务端、srcset 、sizes 、picture标签、svg图片

HTML5+CSS3响应式垂直时间轴,高端,大气

HTML5+CSS3响应式垂直时间轴,使用了HTML5标签<section>,时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中,多个DIV形成一个序列,并把这些DIV放在<section>中。

实现响应式_CSS变量

CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable)。CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示变量名称

vue响应式原理及依赖收集

Vue通过设定对象属性的setter/getter方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。

vue响应式系统--observe、watcher、dep

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身

Responsive Web Design 响应式网页设计

常见的布局方案:固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸

响应式布局的实现

响应式布局,即 Responsive design,在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式布局的关键不仅仅在于布局

媒体类型和响应式设计

常用的三种为:all,print和screen;媒体类型引用方法:link标签,xml方式,@import和css3新增的@media四种

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!