轻松理解vue的双向数据绑定问题


Posted in Javascript onOctober 30, 2017

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>

运行上述的dome,可以使用控制台,obj.username=123赋值,会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法,这也就是vue的双向数据绑定的核心点。

总结

以上所述是小编给大家介绍的轻松理解vue的数据双向绑定问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 #Javascript
ES6 javascript的异步操作实例详解
Oct 30 #Javascript
React Native 搭建开发环境的方法步骤
Oct 30 #Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 #Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 #Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 #Javascript
You might like
常见的PHP五种设计模式小结
2011/03/23 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
采用call方式实现js继承
2014/05/20 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python使用指定端口进行http请求的例子
2019/07/25 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python运行DLL文件的方法
2020/01/17 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
C/C++程序员常见面试题二
2015/11/19 面试题
个人自我评价范文
2014/02/05 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
青春奉献演讲稿
2014/05/08 职场文书
工作检讨书500字
2014/10/19 职场文书
写给老婆的保证书
2015/02/27 职场文书
身份证丢失证明
2015/06/19 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis