[Vue&JS] - Vue数据代理

在了解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数据代理图解

发表评论 / Comment

用心评论~