VUE双向绑定

r囧r小猫 2022-11-07 13:16 30阅读 0赞

### **1、什么是setter、getter ？** ###

答：首先，别误以为他们就是一会要说的get、set，我们先看一句定义：

>        对象有两种属性：（1）数据属性，就是我们经常使用的属性（2）访问器属性，也称存取器属性（存取器属性就是一组获取和设置值的函数）

再看一行代码：

![ffc82fca94cc74075046e1acc03794e4.png][]

log打印出来的如下：

![166524c2fe2933526bcd89f92586036f.png][]

**数据属性**就是a和b；

get和set就是关键字 它们后面各自对应一个函数，这个函数就是上面所讲的，**存储器属性。**

g**et对应的方法称为getter，负责获取值，它不带任何参数。set对应的方法为setter，负责设置值，在它的函数体中，一切的return都是无效的。**

### 　2**、什么是Object.defineProperty() ？** ###

> 　　对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。

定义对象可以使用构造函数或字面量的形式：

![d94e1b06b2ed50c22c2029ef60970d55.png][]

除了以上添加属性的方式，当然还可以使用**Object.defineProperty**定义新属性或修改原有的属性；

> 　　**语法：**
> 
> **　　`Object.defineProperty(obj, prop, descriptor)`**
> 
> 　　**参数：**
> 
> 　　obj：必需。目标对象；  
> 　　prop：必需。需定义或修改的属性的名字；  
> 　　descriptor：必需。目标属性所拥有的特性；
> 
> 　　**返回值：**
> 
> 　　传入函数的对象，即第一个参数obj；

OK，定义介绍完了，我们现在说一下一会关于双向绑定我们要用到的知识点：**存取器描述**；

它是这样使用的：

![ec4fd2dcaa3d81573ff8d273649dfca3.png][]

现在无论是你获取还是设置我们都可以接到通知，是不是有一点双向数据绑定的影子了，别急下面还有；

**现在开始说正题，如何理解Vue的双向数据绑定，先来一个定义：**

> **　　Vue是采用数据劫持结合发布/订阅模式的方式，通过`Object.defineProperty()`来劫持各个属性的`setter`，`getter`，在数据变动时发布消息给订阅者，触发相应的监听回调。**

我们来看一个很粗暴的栗子，low版双向绑定：

![bd1cbf396d6e41423ddaab4e4f5ea566.png][]

是不是有点明白了呢，当然这也不是全部，我们刚刚说的大概就是下面Observer的部分，

> **对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。**

![eb71651db22abb771d9f06bb7a96cb23.png][]

别急，下面也很简单：

### Dep ###

**Dep**，它就像一个**依赖管理**一样，小伙伴又问啥是依赖管理？ 上图！

![31bff38087e94c77ec91a81b0561475c.png][]

我用一个例子来解释一下上面这张图 下面高能预警：

> 　　**在vue中v-model，v-name，\{ \{\}\}等都可以对数据进行展示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变的时候，相应的这个三个指令的html视图也必须改变；**
> 
> **　　于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者（addSub），其订阅者只是更新自己的指令对应的数据，也就是v-model='name'和\{ \{name\}\}有两个对应的订阅者，各自管理自己的地方；**
> 
> **　　每当属性的set方法触发，就循环更新Dep中的订阅者（notify）;**

**　　**OK，Dep是不是很明白了呢

**集合上面的那张图来看，就是Observer一旦有了set触发，就会通知到Dep**，那Dep接到通知之后呢？从图上来看，下面所讲的就应该是Compile了，也很简单：

### Compile ###

首先，先要知道它负责干什么？

> 　　**compile主要做的事情是解析模板指令，将模板中的变量替换成数据**

**　　**其次知道它什么时候要工作，只有两种情况，先上图：

![7a7d89190af21fde31bda479f1f8cb5d.png][]

> 　　1）初始化，init的时候 初始化渲染页面视图；
> 
> 　　2）将每个指令对应的节点绑定更新函数，**添加监听数据的订阅者**；

> 　　Dep负责维护依赖，而订阅者则来自于compile，一旦有数据变动，则会绑定更新函数，此时也就是产生了订阅者，这个时候Dep内就增加了一个订阅者，而一旦数据变动，则会收到通知，更新视图；

好了，你是不是觉得上面这行说不通，或是读不通，当然，因为上面的这个流程了缺少了，我们最后要说的**Watcher，**我把上面这句话补全，就是Watcher的工作了；

### Watcher ###

> **Dep**负责维护依赖，而订阅者则来自于**compile**，一旦有数据变动，则会通过**Watcher**绑定更新函数，此时**Watcher**也向Dep中添加了订阅者，
> 
> 一旦Dep接到**Observer**的通知，它就会再去通知**Watcher**，**Watcher**则会调用自身的**update()**方法，并触发Compile中绑定的回调，更新视图；

###  最后总结 ###

> **首先我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；**
> 
> **然后在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，\{ \{\}\}也会，v-bind也会，只要用到该属性的指令理论上都会；**
> 
> **接着为input会添加监听事件，修改值就等于为该属性赋值，则会触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。**

[ffc82fca94cc74075046e1acc03794e4.png]: /images/20221023/5ba69765671e4558b7010348843d5153.png
[166524c2fe2933526bcd89f92586036f.png]: /images/20221023/330e1cb22d0d45cabbce6aa6d139fa47.png
[d94e1b06b2ed50c22c2029ef60970d55.png]: /images/20221023/6cc423eee177417f8630ab4866968644.png
[ec4fd2dcaa3d81573ff8d273649dfca3.png]: /images/20221023/788d06cb8ac14618aa35b882155f8eaf.png
[bd1cbf396d6e41423ddaab4e4f5ea566.png]: /images/20221023/09b8cd7b46164b2a91da8a40d97ed07c.png
[eb71651db22abb771d9f06bb7a96cb23.png]: /images/20221023/682a361a2ab4434abdf6a87f0f6011ce.png
[31bff38087e94c77ec91a81b0561475c.png]: /images/20221023/6f51dfcb75ca4b21a502a3a845b8ccb2.png
[7a7d89190af21fde31bda479f1f8cb5d.png]: /images/20221023/e257dd2633ea4ca0931ef69b8cef4fc7.png