vue源码学习之Object.defineProperty对象属性监听


Posted in Javascript onMay 30, 2018

本文介绍了vue源码学习之Object.defineProperty对象属性监听,分享给大家,具体如下:

参考版本 vue源码版本:0.11

相关

vue实现双向数据绑定的关键是 Object.defineProperty ,让我们先来看下这个函数。

在MDN上查看有关Object.defineProperty 的解释。

我们先从最简单的开始:

let a = {'b': 1};
Object.defineProperty(a, 'b', {
  enumerable: false,
  configurable: false,
  get: function(){
    console.log('b' + '被访问');
  },
  set: function(newVal){
    console.log('b' + '被修改,新' + 'b' + '=' + newVal);
  }
});

a.b = 2;  // b被修改,新b=2
a.b;    // b被访问

这样,我们就能监听对象了!但问题并不仅仅这么简单。。。

我们可能会有对象中属性的值还是对象这种嵌套情况,可以通过递归解决!

在vue源代码文件 srcobserveobserver.js 中

// 观察者构造函数
function Observer(data){
  this.data = data;
  this.walk(data);
}

let p = Observer.prototype;
p.walk = function(obj){
  let val;
  for(let key in obj){
    // 通过 hasOwnProperty 过滤掉一个对象本身拥有的属性 
    if(obj.hasOwnProperty(key)){
      val = obj[key];
      // 递归调用 循环所有对象出来
      if(typeof val === 'object'){
        new Observer(val);
      }
      this.convert(key, val);
    }
  }
};

p.convert = function(key, val){
  Object.defineProperty(this.data, key, {
    enumerable: false,
    configurable: false,
    get: function(){
      console.log(key + '被访问');
    },
    set: function(newVal){
      console.log(key + '被修改,新' + key + '=' + newVal);
      if(newVal === val) return ;
      val = newVal;
    }
  })
};

let data = {
  user: {
    name: 'zhangsan',
    age: 14
  },
  address: {
    city: 'beijing'
  }
}

let app = new Observer(data);
data.user.name;  // user被访问

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

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
Vue仿支付宝支付功能
May 25 Javascript
详解vue中axios的封装
Jul 18 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 #Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 #Javascript
vue通过点击事件读取音频文件的方法
May 30 #Javascript
vue 表单输入格式化中文输入法异常问题
May 30 #Javascript
详解如何使用babel进行es6文件的编译
May 29 #Javascript
基于打包工具Webpack进行项目开发实例
May 29 #Javascript
JavaScript反射与依赖注入实例详解
May 29 #Javascript
You might like
php 异常处理实现代码
2009/03/10 PHP
php 生成随机验证码图片代码
2010/02/08 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
js创建对象的方式总结
2015/01/10 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python定时器实例代码
2017/11/01 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
Python中求对数方法总结
2020/03/10 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
骨干教师培训制度
2014/01/13 职场文书
工程质量承诺书
2014/03/27 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
暂停营业通知
2015/04/25 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python