[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所介绍，数据驱动视图呢？