Vue数据双向绑定的简单实现

dance 发布于2019-08-23 17:53 / 2739人阅读

摘要：当然这个是简单版本的复杂版本的就如果只是简单实现一下的数据绑定还是很简单的只要将思路理清楚就可以。

这篇仿Vue数据绑定的简单实现,是我看了一些文章之后,把他们的代码研究懂了之后写出来的。当然,这个是简单版本的,复杂版本的就...

如果只是简单实现一下Vue的数据绑定还是很简单的,只要将思路理清楚就可以。写的时候考虑的问题就是2点。
问题:
1)如何实现将数据层的数据显示到视图上
2)如何在视图上的数据改变后,通知数据层相应的数据发生了变化
3)如何让两者联系起来,当一个数据改变时,视图上的所有数据层的数据进行更新
第一个问题要将数据层的数据显示到视图上,很明显这个需要使用DOM操作,先判断 el 下的子元素上的属性是否有关键字(如: v-model、v-bind),如果有就将其与 data 中的key来进行对比,然后data里的值渲染到页面上。这里需要用到递归,从而使el下的每个层级的元素属性都进行一次筛选。
第二个问题可以通过在相应的元素(input)上进行事件监听,当视图上的数据发生了变化就改变相对应的数据成数据。这两者之间需要一个监听器,从而使当一个改变时,另外一个也跟着改变。
第三个问题实现需要利用发布订阅模式和ES5的Object.defineProperty()。首先要创建一个订阅者,里面有一个方法,使视图层上的值等于数据层的数据。在进行DOM筛选时,将对应的数据、key、元素传入订阅者,在将这个订阅者放在一个对象中,这个对象的key就是data的key。然后通过ES5的Object.defineProperty()来对data里的数据进行数据劫持,当data里的数据被重新设置,会触发set函数,然后触发监听者。

具体代码如下:

这篇文章主要是参考于https://segmentfault.com/a/11... ,高难度的那个是https://www.cnblogs.com/canfo...。

专线服务超融合服务器双向数据绑定 js双向数据绑定 js双向绑定数据 asp双向数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104297.html

Vue双向绑定原理，教你一步一步实现双向绑定

摘要：储存订阅器因为属性被监听，这一步会执行监听器里的方法这一步我们把也给弄了出来，到这一步我们已经实现了一个简单的双向绑定了，我们可以尝试把两者结合起来看下效果。总结本文主要是对双向绑定原理的学习与实现。当今前端天下以 Angular、React、vue 三足鼎立的局面，你不选择一个阵营基本上无法立足于前端，甚至是两个或者三个阵营都要选择，大势所趋。所以我们要时刻保持好奇心，拥抱变化，...

Labradors 2019-08-23 12:31 评论0 收藏0
基于Object.defineProperty实现双向数据绑定

摘要：双向数据绑定可算是前端领域经久不衰的热词，不管是前端开发还是面试都会有所涉及。因此，中的挺身而出，拯救了中对数组数据处理的不足。有兴趣的朋友请期待笔者的下一篇博客，讨论下用实现双向数据绑定。双向数据绑定可算是前端领域经久不衰的热词，不管是前端开发还是面试都会有所涉及。而且不同的框架也想尽一切办法去实现这一特性，比如：Knockout / Backbone --- 发布-订阅模式Ang...

fredshare 2019-08-22 18:23 评论0 收藏0
Vue面试题精选：Vue原理以及双向数据绑定的实战过程

摘要：双向数据绑定指的是，将对象属性变化与视图的变化相互绑定。数据双向绑定已经了解到是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过来实现对属性的劫持，达到监听数据变动的目的。和允许观察数据的更改并触发更新。 1 MVVM 双向数据绑定指的是，将对象属性变化与视图的变化相互绑定。换句话说，如果有一个拥有name属性的user对象，与元素的内容绑定，当给user.name赋予一个新...

malakashi 2019-08-02 16:10 评论0 收藏0
Vue面试题精选：Vue原理以及双向数据绑定的实战过程

摘要：双向数据绑定指的是，将对象属性变化与视图的变化相互绑定。数据双向绑定已经了解到是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过来实现对属性的劫持，达到监听数据变动的目的。和允许观察数据的更改并触发更新。 1 MVVM 双向数据绑定指的是，将对象属性变化与视图的变化相互绑定。换句话说，如果有一个拥有name属性的user对象，与元素的内容绑定，当给user.name赋予一个新...

Scliang 2019-08-05 16:38 评论0 收藏0
实现一个简单的双向绑定

摘要：下图展示了实现双向绑定的流程实现一个简单的双向绑定双向绑定最最最初级进阶版操作是非常耗时和好性能，所以在优化过程中先从操作入手。接触Vue有一段时间了，但是对于其双向绑定的实现一直是似懂非懂，今天看到一篇写的比较好的文章传送门1 根据原作者的指导自己也去实现了一遍简单的 demo （本文的demo均基于Object.defineProperty 实现数据劫持，利用了对Vue.js实...

elisa.yang 2019-08-22 11:10 评论0 收藏0
实现一个简单的双向绑定

摘要：下图展示了实现双向绑定的流程实现一个简单的双向绑定双向绑定最最最初级进阶版操作是非常耗时和好性能，所以在优化过程中先从操作入手。接触Vue有一段时间了，但是对于其双向绑定的实现一直是似懂非懂，今天看到一篇写的比较好的文章传送门1 根据原作者的指导自己也去实现了一遍简单的 demo （本文的demo均基于Object.defineProperty 实现数据劫持，利用了对Vue.js实...

qiangdada 2019-07-31 17:19 评论0 收藏0