这里写自定义目录标题
前言:本文是一篇学习日记,仅供参考,如有错误的地方请指正。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进行修改了。