原生js模拟vue实现双向数据绑定

原生js模拟vue实现双向数据绑定

写在前面

vue.js是mvvm模式的框架，如图:

通过和传统mvc模式的对比，我们发现多了个ViewModel,没有控制器(controller)了。ViewModel是mvvm模式的精髓所在它连接了view(视图层)与model（数据模型），view或model发生改变，他们对应的model和view也会发生改变，非常方便。尤其是在做表单类型业务的时候深感欣慰。
它自带了双向数据绑定，使我们的开发变得便捷而快速。那么它的底层是如何实现的呢？
还是看图，一目了然：
简而言之，要实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体细节就不详细介绍了，大家可自行百度。此篇文章是介绍怎么用原生js实现双向数据绑定。

原生js实现双向数据绑定

第一步 编写html结构

只需要一个input框和一个p标签即可

第二步 编写js, 重点：Object.defineProperty()

该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

第三步 监听键盘事件

完整代码

注释很详细了，相信大家都能看懂。

说在后面

Object.defineProperty()，这个方法非常重要，也很经典。本人后续会新开一篇专门讲它，感兴趣的可以持续关注。
觉得本文中能帮到你的可以点赞转发，转发请注明出处。