如何通过JavaScript实现基于访问器的数据双向绑定机制？

本文共计2826个文字，预计阅读时间需要12分钟。

原文：本文字例为大家分享了js实现数据双向绑定的具体代码，供大家参考。具体内容如下：

双向绑定：+ 双向绑定基于MVVM模型：+ MVVM模型：+ Model：+ 模型层，负责业务逻辑以及与数据库的交互

改写后：以下为js实现数据双向绑定的示例代码，供参考。内容包含：

双向绑定：+ MVVM模型：+ Model：+ 负责业务逻辑和数据库交互

本文实例为大家分享了js实现数据双向绑定的具体代码，供大家参考，具体内容如下

双向绑定：

双向绑定基于MVVM模型：model-view-viewModel

model: 模型层，负责业务逻辑以及与数据库的交互
view：视图层，负责将数据模型与UI结合，展示到页面中
viewModel：视图模型层，作为model和view的通信桥梁

双向绑定的含义：当model数据发生变化的时候，会通知到view层，当用户修改了view层的数据的时候，会反映到模型层。

而双向数据绑定的好处在于：只关注于数据操作，DOM操作减少

Vue.js实现的原理就是采用的访问器监听，所以这里也采用访问器监听的方式实现简单的数据双向绑定。

访问器监听的实现，主要采用了javascript中原生方法：Object.defineProperty，该方法可以为某对象添加访问器属性，当访问或者给该对象属性赋值的时候，会触发访问器属性，因此利用此思路，可以在访问器属性中添加处理程序。

这里先实现一个简单的input标签的数据双向绑定过程，先大致了解一下什么是数据的双向绑定。