浅谈vue实现数据监听的函数 Object.defineProperty


Posted in Javascript onJune 08, 2017

在 ES5中新增了不少新的API, 例如  新增了 Object.xxx相关的方法,其中有一个定义属性相关的 Object.defineProperty 这个方法(还有Object.defineProperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下:

Object.defineProperty([Object] obj, [String] propname, [Object] desp )

  1. @param  obj  要配置属性的某个对象
  2. @param propname 要配置的属性名,是一个字符串
  3. @param desp 对属性的描述,是一个对象,

desp 中可以配置的项目 

<1> writable:  true/false 是否可写

<2> configurable : true/false 是否可以配置,例如删除该属性

<3> enumerable: true/false 指的是是否可以使用 for in循环遍历属性

<4> value:  值  ,属性的值

我们在写vue项目的时候会在 data属性中添加我们自己的属性,这个属性在vue中是响应式的,也就是它可以监听到数据的变化,做出相应的改变(例如DOM操作)

我们自己利用 defineProperty给属性生成setter和getter(也就是其他编程语言里的存取器),就可以达到监听数据变化的目的

下面我们来自己实现一个数据监听的小 demo

有如下的数据

let vue = {
   data: {
    title: 'life style',
    content: 'bike walk sleep...'
   }
  };

已经提前声明的 data属性及其内部的属性,我们的目标是监听 data中,title和content的变化

如何做到呢? 属性的个数是不确定的,所以我们可以使用 for in循环遍历data对象的所有的属性

//如何监听用户自定义的 data中属性的改变?
  let data = vue.data;
  for (let prop in data) {
   data['__' + prop] = data[prop]; //存储私有属性
   Object.defineProperty(data, prop, {
    enumerable : true,
    set: function (newVal) {
     console.log('你正在修改'+prop + ' !...操作DOM...');
     // 数据校验
     this['__' + prop] = newVal;
    },
    get: function () {
     console.log('getter 获取值 ...');
     return this['__' + prop];
    }
   });
  }

遍历data属性的时候调用 defineProperty来给data对象的属性添加set和get方法,

我们给data添加一个新的属性   __xxx来保存我们之前的值,以便在 get方法中获取原来的值

set方法 用于监听这个属性被重新赋值,

get方法用于获取你想要的格式的值

此处需要注意的是 不要在 set和get中 使用this赋值或者取值,这样会导致循环调用,出现问题!!!

另外 我们不要使用 var,而要使用 let ,因为var不是块作用域, 会导致你最后访问到的prop总是最后一个

定义好之后,我们可以修改 data中title和content属性了,

当我们给 title赋值的时候回自动调用 set, 获取值得时候自动调用get

测试代码

// 赋值操作会调用这个属性的set方法, 类似于 set('aaa')
  data.title = 'aaa';
  // 获取值操作会调用这个属性的get方法
  console.log(data.title);
  data.content = 123;
  // 此种动态属性方式也会触发 set / get
  data['title'] = 123;
  console.log(data['title']);

结果(建议在最新版的chrome中操作):

浅谈vue实现数据监听的函数 Object.defineProperty

对刚刚的遍历方法还存在一些问题和说明:

1.data属性的某个属性可能还是对象,也就是存在多层级对象监听的问题

此时可以使用递归函数遍历data的属性,进行相同操作

2. 通过  data.title = 1是实际上是调用了 set方法, 这个类似于 OC中的点语法

3. 要同时定义多个属性,可以使用

Object.defineProperties([Object] obj, [Object] props);

需要注意的是, 本文只是介绍 defineProperty的基本使用,并非代表vue的代码实现

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

Javascript 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 #jQuery
浅谈 Vue v-model指令的实现原理
Jun 08 #Javascript
Vue如何实现组件的源码解析
Jun 08 #Javascript
jquery Ajax实现Select动态添加数据
Jun 08 #jQuery
js canvas实现放大镜查看图片功能
Jun 08 #Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 #Javascript
微信小程序开发之map地图实现教程
Jun 08 #Javascript
You might like
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
js一组验证函数
2008/12/20 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
党员创先争优活动总结
2014/05/04 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
义诊活动通知
2015/04/24 职场文书
回复函格式及范文
2015/07/14 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫