vue数据双向绑定原理解析(get & set)


Posted in Javascript onMarch 08, 2017

前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系;view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据。view到model的绑定都是通过事件回调函数操作的,model到view的绑定有多种方法。

angular,react,vue等mv*模式的框架都实现了数据双向绑定;angular是通过脏检查即新老数据的比较来确定哪些数据发生了变化,从而将它更新到view中;vue则是通过设置数据的get和set函数来实现的,这种方式在性能上是优于angular的。

下面代码是一个简单的定义数据get和set方法的例子,set和get方法分别在数据改变和访问的时候被调用,能够监听数据的变化:

// 数据绑定的构造函数
function Observer(data) {
 this.data = data;

 for(var key in data) {
  if(data.hasOwnProperty(key)) {
   var val = data[key];
   if(typeof data[key] === "object"){
    // 如果值不为原始类型,则继续递归
    new Observer(val);
   }else {
    this.convert(key, val);
   }
  }
 }
}
// 定义set 和 get函数
Observer.prototype.convert = function(key, val) {
 Object.defineProperty(this.data, key, {
  enumerable: true,
  confingurable: true,
  get: function() {
   console.log(key + "被访问了");
   return val;
  },
  set: function(newVal) {
   console.log(key + "被设置了新值" + newVal);
   val = newVal;
  }
 });
}
var app = new Observer({name: "xieshuai", age: 24, address: {city: "shenzheng"}});

app.data.name;  // name被访问了
app.data.age = 18; // age被设置了新值18

Object.defineProperty,这是ES6新增的方法,通过这个方法,可以自定义getter和setter函数。

上面的代码只是个简单的例子,并没有处理数组的情况;不过这是vue实现数据双向绑定的核心。

本文到此结束,文中若有不对之处,还望指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
footer定位页面底部(代码分享)
Mar 07 #Javascript
vue父子组件的数据传递示例
Mar 07 #Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 #Javascript
完美实现js焦点轮播效果(一)
Mar 07 #Javascript
Vue2.0组件间数据传递示例
Mar 07 #Javascript
js实现网页定位导航功能
Mar 07 #Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP array 的加法操作代码
2010/07/24 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
Jquery 扩展方法
2010/05/06 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
简单介绍Python中的JSON模块
2015/04/08 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
python实现最小二乘法线性拟合
2019/07/19 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
董事长职责范文
2013/11/08 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
Docker官方工具docker-registry案例演示
2022/04/13 Servers