深入响应式原理

说到响应式原理其实就是双向绑定的实现，说到双向绑定其实有两个操作，数据变化修改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方法。指令中_绑定方法的作用有几点：

调用所有已绑定的指令的绑定方法
实例化一个观察器，将指令的更新与观察者绑定在一起（这样就实现了观察者接收到消息后触发的更新方法，指令可以做出对应的更新视图操作）
调用指令的更新，首次初始化视图

这里有一个点需要注意一下，化实例Watcher的时候，看守会将自己主动的推入德普依赖中

好了，到这里整体的流程已经结束了，来一段总结吧

总结

响应式原理共有四个部分observe，Dep，watcher，Directive

观察者可以监听数据的变化

Dep可以知道数据变化后通知给谁

Watcher可以做到接收到通知后将执行指令的更新操作

指令可以把Watcher和指令连在一起

不同的指令都会有更新的方法来使用自己的方式更新DOM

必须使用观察家触发吸气，德普才会收集依赖

执行流：

当数据触发setter时，会发消息给所有watcher，watcher会跟执行指令的更新方法来更新视图

当指令在页面上修改了数据会触发守望的一套方法来修改数据

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

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

深入响应式原理

总结

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

使用现代CSS的响应式版面

web响应式图片的5种实现

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

实现响应式_CSS变量

vue响应式原理及依赖收集

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

Responsive Web Design 响应式网页设计

响应式布局的实现

媒体类型和响应式设计