谈谈 Vue2 的双向绑定

是什么

双向绑定由三个重要部分构成

数据层（Model）：应用的数据及业务逻辑 视图层（View）：应用的展示效果，各类 UI 组件 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来

原理：通过 数据劫持 结合 发布-订阅模式 的方式来实现的，数据变化更新视图，视图变化更新数据。

1. 说明一般使用 v-model/.sync 实现，v-model 是 v-bind：value 和 v-on：input 的语法糖

   • v-bind:value 实现了 data => UI 的 单向绑定
   • v-on:input 实现了 UI => data 的单向绑定
   • 加起来就是双向绑定了

2. 数据驱动 UI 通过 Object.defineProperty API 给 data 创建 getter 和 setter,用于监听 data 的改变，data 一变就会安排改变 UI

3. UI 驱动数据 通过 template compiler 给 DOM 添加事件监听，DOM input 的值变了就会去修改 data

参考文章

• https://segmentfault.com/a/1190000039750996
• vue 的双向绑定原理及实现 - canfoo#! - 博客园