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

来源:http://www.chinese-glasses.com 作者:Web前端 人气:140 发布时间:2020-03-14
摘要:然后,给data多添加一点数据 浅谈vue实现数据监听的函数 Object.defineProperty,vuedefineproperty 在 ES5中新增了不少新的API, 例如  新增了Object.xxx相关的方法,其中有一个定义属性相关的 Object

然后,给data多添加一点数据

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

在 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中操作):

图片 1

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

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

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

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

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

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

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

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

http://www.bkjia.com/Javascript/1215284.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1215284.htmlTechArticle浅谈vue实现数据监听的函数 Object.defineProperty,vuedefineproperty 在 ES5中新增了不少新的API, 例如 新增了 Object.xxx相关的方法,其中有一个定义属...

const _data = { ...data }for(let i in data){ Object.defineProperty(data, i, { get(){ return _data[i]+"经过了JS的修改" }, set(val){ _data[i] = val; } })}
const data = { name: "tom", age: 14, friend: { "name1": "张三", "name2": "李四", "name3": "王五", "name4": "赵六" },}

最后执行代码,一个简单的数据监听就完成了。

格式化object对象,监听值

第一步:

为什么需要单独的_data?

时间: 2019-11-25阅读: 54标签: 数据

主要是用Object.defineProperty实现类似vue的数据绑定。

本文由10bet发布于Web前端,转载请注明出处:浅谈vue实现数据监听的函数 Object.defineProperty,

关键词:

上一篇:没有了

下一篇:没有了

最火资讯