在了解Vue中的数据代理之前,我们首先了解一下Object对象下的definePropert()方法。
0x01-Object.defineProperty() 方法:
Object.defineProperty()方法可以用来为对象增加属性,并且被添加属性很特殊,可以设置是否允许值被更改,或者如果访问这个属性的时候,它可以执行什么操作,这个属性的值被更改时,它可以执行什么操作,非常的NB!!
1.1 - 注意:
- 它应该是直接使用Object调用该方法,而不是一个Object类型的实例调用。
//错误 - 不应该使用object类型的实例来调用 var obj = {}; obj.definePropert();
//正确 - 应该使用Object构造对象调用此方法 Object.defineProperty();
1.2 - 参数:
- obj:要定义属性的对象.
- prop:要添加属性的名称.
- descriptor:配置项.
1.3 - 配置项:
value:
- 1.默认值:undefined。
- 2.描述:被添加属性的值,可以是任何JS中的值。
enumerable:
- 1.默认值:false。
- 2.描述:在遍历时,只有enumerable为true,被添加的属性才会出现,否则不出现。
writable:
- 1.默认值:false。
- 2.描述:
- 1.只有writable为true时,value的值才可以有效的被更改。
- 2.为false时,修改也不会报错,但是打印该对象会发现值并未修改。
get:
- 1.默认值:undefined。
- 2.说明:
- 1.它的值应该是一个函数,当访问被添加的属性时,就会调用该方法。
- 2.该函数的返回值会用作被添加属性的值。
set:
- 1.默认值:undefined。
- 2.说明:
- 1.它的值应该是一个函数,当被添加的属性的值发生修改时,就会调用该方法。
- 2.该方法接收一个参数,值就是被新赋予的值。
1.4 - 案例:
问题:
- 1.将 num 变量的值,添加到 person 对象的 age 属性中。
- 2.当我们修改 num 这个变量值时,访问 person.age ,使它的值也随着 num 发生改变。
- 3.当我们修改 person.age 时,使 num 也随着 person.age 改变。
思路:
- 1.我们只需要为在配置项中添加一个 get ,每次访问该属性时,都会去访问 num 这个变量,从而每次输出的都是 num 的值。
- 2.我们还可以添加 set,当修改 person.age 属性时,将 value 的参数值赋值给 num,使它的值也随其改变。
let num= 19; let person = {}; Object.defineProperty(person, "age", { //每当访问person.age时,就会执行该方法. //return回的内容,就会当做person.age的值. get(){ return num; }, //当person.age被修改时,就将新值赋予给num. //从而在通过getter访问num时,还是同步的数据. set(value){ num = value; } });
0x02 - Vue数据代理:
Vue就用到了数据代理,在我们操作
vm.属性
时,它就用到了set和get方法,最终操作的就是_data
中的数据,(后面仅仅是我猜想)
-> 而_data
也用到了代理,当它的值发生变化时,也会通过set方法去修改Dom元素的值,否则怎么会如Vue所介绍,数据驱动视图呢?
版权声明:《 [Vue&JS] - Vue数据代理 》为甄雨锋原创文章,转载请注明出处!
最后编辑:2021-12-24 21:12:10