浅谈vue实现数据监听的函数 Object.defineProperty
在 es5中新增了不少新的api, 例如 新增了 object.xxx相关的方法,其中有一个定义属性相关的 object.defineproperty 这个方法(还有object.defineproperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下:
object.defineproperty([object] obj, [string] propname, [object] desp )
- @param obj 要配置属性的某个对象
- @param propname 要配置的属性名,是一个字符串
- @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.data属性的某个属性可能还是对象,也就是存在多层级对象监听的问题
此时可以使用递归函数遍历data的属性,进行相同操作
2. 通过 data.title = 1是实际上是调用了 set方法, 这个类似于 oc中的点语法
3. 要同时定义多个属性,可以使用
object.defineproperties([object] obj, [object] props);
需要注意的是, 本文只是介绍 defineproperty的基本使用,并非代表vue的代码实现
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
-
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
-
浅析Proxy可以优化vue的数据监听机制问题及实现思路
-
浅谈vue中数据双向绑定的实现原理
-
利用Object.defineProperty简单实现vue的数据响应式原理
-
vue3.0响应式数据是如何实现的?相比vue2.0中Object.defineProperty()有什么优势?
-
简单实现Vue2.0(Object.defineProperty)和Vue3.0(Proxy)的数据双向绑定
-
Vue中实现数据双向绑定的原理——Object.defineProperty()
-
浅谈vue实现数据监听的函数 Object.defineProperty
-
vue 双向数据绑定的实现学习之监听器的实现方法