Vue的双向数据绑定原理（极简版）

第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步： Watcher(订阅者)是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步： MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

回答以上内容即可，下方内容，可以帮助大家理解

---

名词解释：

1. 什么是setter、getter

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

对象有两种属性：

1. 数据属性: 就是我们经常使用的属性

2. 访问器属性: 也称存取器属性（存取器属性就是一组获取和设置值的函数）

再看一行代码：

log打印出来的如下：

数据属性就是a和b；

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

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

2. 什么是Object.defineProperty() ？

答：我们先看一句定义：

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

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

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

语法：

Object.defineProperty(obj, prop, descriptor)

参数：

obj： 必需。目标对象；

prop： 必需。需定义或修改的属性的名字；

descriptor： 必需。目标属性所拥有的特性；

返回值：

传入函数的对象，即第一个参数obj；

OK，定义介绍完了，我们现在说一下一会关于双向绑定我们要用到的知识点：存取器描述；（诶？你是不是发现和上面好像有点关系）

对头，它是这样使用的：

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

OK，我终于叨叨完没用的了，现在开始说正题，如何理解Vue的双向数据绑定，哈哈，先来一个定义：

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

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

是不是有点明白了呢，当然这也不是全部，我们刚刚说的大概就是下面Observer的部分，对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。

别急，下面也很简单：

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

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

在vue中v-model，v-name，{{}}等都可以对数据进行展示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变的时候，相应的这个三个指令的html视图也必须改变；

于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者（addSub），其订阅者只是更新自己的指令对应的数据，也就是v-model='name'和{{name}}有两个对应的订阅者，各自管理自己的地方；

每当属性的set方法触发，就循环更新Dep中的订阅者（notify）;

OK，Dep是不是很明白了呢

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

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

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

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

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
d开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！