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 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
javascript常用的设计模式
Feb 09 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
JS实现数组去重的11种方法总结
Apr 04 Javascript
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
解析thinkphp基本配置 convention.php
2013/06/18 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
RC4文件加密的python实现方法
2015/06/30 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
承诺函格式模板
2015/01/21 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
毕业典礼主持词
2015/06/29 职场文书
信息简报范文
2015/07/21 职场文书
运动会加油稿30字
2015/07/21 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
2016年学校招生广告语
2016/01/28 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python