mvvm数据双向绑定实现的原理

leoperfect 发布于2019-08-23 12:12 / 372人阅读

摘要：当处理好后则会将对应的数据展现到层。双向绑定例如有一个变量通过输入框的值来给它赋值，使用原生的方式是给框绑定事件每次触发该事件的时候再把值赋给。如果实现了数据的双向绑定则当的发生改变时，的值也会自动更新。

以Vue.js框架为例子，使用的mvvm模式

view指的是页面的html和css构成的视图。
model指的是从后端取到的数据模型
viewmodel 指的是前端开发人员组织生成和维护的视图数据层。这一层包含的是视图行为和数据。
视图行为指的是如页面加载进来时请求什么，将指定的数据放到指定的元素上，点击某个元素触发某事件。当viewmodel处理好后则会将对应的数据展现到view层。

双向绑定
例如有一个变量name,通过输入input框的值来给它赋值，使用原生js的方式是给input框绑定input事件,每次触发该事件的时候再把值赋给name。
如果实现了数据的双向绑定,则当input的value发生改变时，name的值也会自动更新。通过请求数据获取别的js操作改变name的值时，在view中的input也会自动更新，这就是所谓的数据双向绑定。

双向绑定的好处在于不管是data(也就是name)或者视图（input）发生了改动另外一个都可以跟着变化,不需要再手动给它们赋值。

实现代码

//定义一个对象
let obj = {},txt = "";
  Object.defineProperty(obj,"txt",{
    set(val){
      txt = val || "";
      document.getElementsByTagName("input")[0].value = txt;
      document.getElementsByTagName("p")[0].innerHTML = txt;
    },
    get(){
      
      return txt;
    }
  })
  // keyup会触发 obj的set方法
  document.addEventListener("keyup",(e)=>{
    obj.txt = e.target.value;
  })

idc机房托管混合云双向数据绑定 js双向数据绑定 js双向绑定数据 asp双向数据绑定

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

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

剖析Vue实现原理 - 如何实现双向绑定mvvm（转载）

摘要：接下来要看看这个订阅者的具体实现了实现订阅者作为和之间通信的桥梁，主要做的事情是在自身实例化时往属性订阅器里面添加自己自身必须有一个方法待属性变动通知时，能调用自身的方法，并触发中绑定的回调，则功成身退。本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，...

nemo 2019-08-21 11:38 评论0 收藏0
剖析Vue原理&实现双向绑定MVVM

摘要：所以无需太过介怀是实现的单向或双向绑定。监听数据绑定更新函数的处理是在这个方法中，通过添加回调来接收数据变化的通知至此，一个简单的就完成了，完整代码。本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也...

melody_lql 2019-08-21 14:17 评论0 收藏0
【教学向】150行代码教你实现一个低配版的MVVM库（1）- 原理篇

摘要：模块则负责维护，以及各个模块间的调度思考题了解了的实现机制，你能否自己动手也试着用百来行代码实现一个库呢好了本教程第一部分设计篇就写到这里，具体请移步下一篇教学向行代码教你实现一个低配版的库代码篇我会用给出一版实现。适读人群本文适合对MVVM有一定了解（如有主流框架ng，vue等使用经验配合本文服用则效果更佳），虽然会用这类框架，但是对框架底层核心实现又不太清楚，或者能说出个所以然...

selfimpr 2019-08-21 12:01 评论0 收藏0
Vue双向绑定原理，教你一步一步实现双向绑定

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

Labradors 2019-08-23 12:31 评论0 收藏0