在 ES5中新增了不少新的API, 例如  新增了 Object.xxx相关的方法,其中有一个定义属性相关的 Object.defineProperty 这个方法(还有Object.defineProperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下: Object.defineProperty([Object] obj, [String] propname, [Object] desp ) [list=1] [*]@param  obj  要配置属性的某个对象[/*] [*]@param propname 要配置的属性名,是一个字符串[/*] [*]@param desp 对属性的描述,是一个对象,[/*] [/list] [b]desp 中可以配置的项目  [/b] <1> writable:  true/false 是否可写 <2> configurable : true/false 是否可以配置,例如删除该属性 <3> enumerable: true/false 指的是是否可以使用 for in循环遍历属性 <4> value:  值  ,属性的值 我们在写vue项目的时候会在 data属性中添加我们自己的属性,这个属性在vue中是响应式的,也就是它可以监听到数据的变化,做出相应的改变(例如DOM操作) 我们自己利用 defineProperty给属性生成setter和getter(也就是其他编程语言里的存取器),就可以达到监听数据变化的目的 下面我们来自己实现一个数据监听的小 demo 有如下的数据 已经提前声明的 data属性及其内部的属性,我们的目标是监听 data中,title和content的变化 如何做到呢? 属性的个数是不确定的,所以我们可以使用 for in循环遍历data对象的所有的属性 遍历data属性的时候调用 defineProperty来给data对象的属性添加set和get方法, 我们给data添加一个新的属性   __xxx来保存我们之前的值,以便在 get方法中获取原来的值 set方法 用于监听这个属性被重新赋值, get方法用于获取你想要的格式的值 此处需要注意的是 不要在 set和get中 使用this赋值或者取值,这样会导致循环调用,出现问题!!! 另外 我们不要使用 var,而要使用 let ,因为var不是块作用域, 会导致你最后访问到的prop总是最后一个 定义好之后,我们可以修改 data中title和content属性了, 当我们给 title赋值的时候回自动调用 set, 获取值得时候自动调用get [b]测试代码[/b] 结果(建议在最新版的chrome中操作): [img]http://files.jb51.net/file_images/article/201706/201768170237913.png?20175817246[/img] 对刚刚的遍历方法还存在一些问题和说明: 1.data属性的某个属性可能还是对象,也就是存在多层级对象监听的问题 此时可以使用递归函数遍历data的属性,进行相同操作 2. 通过  data.title = 1是实际上是调用了 set方法, 这个类似于 OC中的点语法 3. 要同时定义多个属性,可以使用 需要注意的是, 本文只是介绍 defineProperty的基本使用,并非代表vue的代码实现 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。