浅析Vue2中的数据双向绑定

前言：本文是一篇学习日记，仅供参考，如有错误的地方请指正。Vue最大的特点是响应式，数据双向绑定是实现的原理。

Vue2中数据双向绑定的原理

以下图片来源https://www.bilibili.com/video/BV1Zy4y1K7SH?p=8

从图可以发现，黄色框中我们在data中编写了name和address两个属性。

流程1

在流程1中，Vue将data通过Object.defineProperty进行数据劫持，在vm中生成了_data属性，并带有get和set（如下图所示）。当我们对_data中的属性name或address进行操作时，get或set会监测到并将改操作施加到data中的对应的属性上。至此Vue的双向绑定已经实现了。

流程2

在流程1中，Vue已经完成了数据的双向绑定了。我们此时已经可以通过如下代码对data中的address进行修改了。