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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
js indexOf()定义和用法
Oct 21 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
解析php常用image图像函数集
2013/06/24 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
JavaScript 特殊字符
2007/04/05 Javascript
js计算精度问题小结
2013/04/22 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
react中的ajax封装实例详解
2017/10/17 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
python实现无证书加密解密实例
2014/10/27 Python
python实现二叉树的遍历
2017/12/11 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
python super()函数的基本使用
2020/09/10 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
25道Java面试题集合
2013/05/21 面试题
电气自动化大学生求职信
2013/10/16 职场文书
小学课外活动总结
2014/07/09 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
开平碉楼导游词
2015/02/06 职场文书
单身申明具结书
2015/02/26 职场文书
个人总结格式范文
2015/03/09 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android