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

最新推荐文章于 2023-03-06 22:19:14 发布

weixin_34092455

最新推荐文章于 2023-03-06 22:19:14 发布

阅读量434

点赞数

CC 4.0 BY-SA版权

文章标签：前端后端 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016568221

本文深入解析了MVVM模式在Vue.js框架中的应用，详细介绍了View、Model和ViewModel的概念，以及双向绑定如何简化数据同步，提升前端开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以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;
  })