vue双向绑定的原理及实现双向绑定MVVM源码分析

2. 脏值检查(.js)
3. 数据劫持(vue.js)
脏值检查:是通过脏值检测的方式比对数据是否有变更 , 来决定是否更新视图 , 最简单的方式就是通过 ()定时轮询检测数据的变动 。
数据劫持:vue.js 则是采用数据劫持结合发布者-订阅者模式 , 通过.()来劫持各个属性的 ,  。在数据变动时发布消息给订阅者 , 触发响应的监听回调 。
下面是一个通过 . 来实现一个简单的数据双向绑定 。通过该方法来监听属性的变化 。
实现的效果简单如下:页面上有一个input输入框和div显示框 , 当在input输入框输入值的时候 , div也会显示对应的值 , 当我打开控制台改变 obj.name="输入任意值"的时候 , 按回车键运行下 , input输入框的值也会跟着变 , 可以简单的理解为 模型-> 视图的 改变 , 以及 视图 -> 模型的改变 。如下代码:
标题使用Object.defineProperty实现简单的双向数据绑定


查看效果
vue是通过数据劫持的方式来做数据绑定的 , 最核心的方法是通过 .()方法来实现对属性的劫持 , 达到能监听到数据的变动 。要实现数据的双向绑定 , 需要实现如下几点:
1. 需要实现一个数据监听器 , 能够对数据对象的所有属性进行监听 , 如有变动拿到最新值并通知订阅者 。
2. 需要实现一个指令解析器, 对每个元素节点的指令进行扫描和解析 , 根据指令模板替换数据 , 以及绑定相应的更新函数 。
3. 需要实现一个 , 作为链接和的桥梁 , 能够订阅并收到每个属性变动的通知 , 执行指令绑定的相应的回调函数 , 从而更新视图 。
一: 实现
我们可以使用.()来监听属性的变动 , 我们需要对属性对象进行递归遍历 , 包括子属性对象的属性 。再加上和方法 , 我们可以和上面的demo一样 , 监听input值的变化 , 即 视图 -> 模型 。且当我们给某个对象的属性赋值的话 , 会自动调用方法 , 来动态修改数据 , 即 模型 -> 视图 。
引入我们可以使用 .来实现监听属性的变动 , 如下代码:
标题