轻松理解vue的双向数据绑定问题-创新互联

Vue介绍

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了大柴旦免费建站欢迎大家使用！

Vue是当前很火的一款MVVM的轻量级框架，它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api，使得我们很容易上手。

Vue与MVVM

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。Vue以数据为驱动，将自身的Dom元素与数据进行绑定，一旦创建绑定，Dom和数据保持同步。

双向绑定

主流双向数据绑定实现原理

脏值检测 : 这是AngularJS实现双向数据绑定的方式。原理是当数据进行变更的时候对所有Model和View的绑定关系进行一次检查，识别是否有数据进行了变更，如果有变化则进行处理，由于可能进一步引发其他数据的改变，会再次循环这个过程，知道没有数据的变化之后。发送数据到视图重新渲染。可想而知，这样的方式性能不高。

单向数据绑定

指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。
单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。简单的来说就是DOM操作直接改变

数据数据双向

数据模型（Module）和视图（View）之间的双向绑定。

用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）操作双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

如何使用js达到双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" id="userName">
<br>
<span id ="uName"></span>
<script>
  var obj={
    pwd:"1234"
  };
  //主要使用到了get和set方法，最为关键
  Object.defineProperty(obj,"userName",{
    get:function(){
      console.log('get init');
    },
    set:function(val){
      console.log("set init");
      document.getElementById("uName").innerText=val;
      document.getElementById("userNmae").value=val;
    }
  });
  document.getElementById("userName").addEventListener("keyup",function(event){
    obj.userName=event.target.value;
  }
  )
</script>
</body>
</html>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻名称：轻松理解vue的双向数据绑定问题-创新互联
网站URL：https://www.cdcxhl.com/article14/depsde.html

成都网站建设公司_创新互联，为您提供品牌网站制作、微信公众号、Google、网站收录、网站营销、服务器托管

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容