Vue数据代理

起床了
88 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

一。初识Vue

1,创建一个容器

<div class="root">
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
</div>

2.引入vue文件

<script src="./js/vue.js"></script>

3.创建vue实例对象

    Vue.config.productionTip = false  //关闭生产提升
    // 创建vue实例
    let vm=new Vue({

el选项，指定当前Vue实例，操作的容器

        el:".root",

data选项用来储存当前Vue实例管理的数据

data里面管理的数据，会被添加到Vue实例身上

data选项里面管理的数据，其实会被vue实例身上的_data进行代理，并将代理后的数据再添加到vue实例身上，方便直接点用

        data:{
            name:"张三",
            age:20
        }
    })
    console.log("vm._data",vm._data);

image.png

二. 数据代理

1.何为数据代理

①。通过一个对象代理对另一个对象中属性的操作(读写)

  1. Vue中数据代理的好处:

更加方便的操作data中的数据

3.基本原理:

通过0bject.defineProperty()把data对象中所有属性添加到vm上。

为每一个 添加到vm上的属性，都指定一个getter / setter 。

在getter / setter内部去操作(读 / 写) data中对应的属性。

   let data={
        name:"小猪佩奇",
        age:30
    }

    let _data=data
    console.log(_data);

image.png

操作_data，真正改变的是data，此时就可以将_data当做是data的代理对象

  _data.name="李四"
    _data.age=50
    console.log(data);

image.png

4.如何给对象添加成员

      let obj = {};

①。方式1：对象名.属性的方式，给对象添加成员

     obj.name = "王五";

②。 方式2：对象名['属性名']的方式，给对象添加成员

     obj["age"] = 88;

③。 方式3：通过Object对象的defineProperty方法，给指定的对象添加指定的属性

这种方式，给对象添加成员，尽管繁琐，但是可以配置更多的功能。

默认添加的属性是不允许删除的，如果要允许删除，就需要添加configurable配置。

默认添加的属性是不允许枚举的，所谓枚举指的就是遍历。

    Object.defineProperty(obj, "sex", {
    value: 100, //属性值
    configurable: true, //属性值允许被删除
    writable: true, //控制属性是否可以修改
    enumerable: true, //属性值允许被枚举
  });

image.png

遍历出对象的所有属性名称、

  for (let key in obj) {
    console.log(key);
  }

delete关键字，用于删除对象身上的指定成员

  delete obj.name;
  obj.age = 70;
  delete obj.sex;
  obj.sex = "未知";
  console.log(obj);

可以看出来 Object.defineProperty可以控制属性值的删除修改和遍历
image.png

01.我们先定义一份原始数据，也就是被代理对象。

  let data = {
    name: "菜虚坤",
    age: 40,
  };

02.再定义一个空的代理对象

  let _data = {};

03.使用Object.defineProperty给代理对象添加属性

  Object.defineProperty(_data, "name", {
    get() {
        // get方法，用于返回属性的值，当使用到_data对象里面的name属性获取值时，就会执行get方法
      console.log("get被调用,data被读取");
      return data.name;
    },
    set(val) {
           // set方法，用于设置属性的值，当使用到_data对象里面的name属性并给它赋值时，就会调用set方法
      console.log(`set被调用,data被修改,${data.name}`);
      data.name = val;
      console.log(data.name);
    },
  });

  Object.defineProperty(_data, "age", {
    get() {
      console.log("get被调用,data被读取");
      return data.age;
    },
    set(val) {
      data.age = val;
      console.log(`set被调用,data被修改,${data.age}`);
      console.log();
    },
  });
  _data.name = "小李"; //data被修改
  console.log(_data.name);   //data被读取
  console.log(data);
  console.log("--------------");
  _data.age = 99; //data被修改
  console.log(_data.age);   //data被读取
  console.log(data);

image.png

avatar
文章
阅读
粉丝