[Vue]数据代理

---

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

---

---

1. Object.defineProperty()方法

该方法用于给对象添加属性。

Object.defineProperty()

需要传入三个参数：
1. 需要进行属性添加的对象
2. 将要添加到对象的新属性名
3. 配置对象，在配置对象中可以指定新属性的值

1.1 使用Object.defineProperty()向对象中添加属性

  <script>
    let person = {
      name: 'zs',
      sex: 'male'
    }
    // 向person对象中新添加一个age属性
    Object.defineProperty(person, 'age', {
      value: 18
    })
    console.log(person)
  </script>

1.2 使用Object.defineProperty()添加的属性默认不可枚举

使用Object.defineProperty()添加的属性默认不可枚举，即使用Object.defineProperty()添加的属性默认是不能进行遍历的。

  <script>
    let person = {
      name: 'zs',
      sex: 'male'
    }
    // 向person对象中新添加一个age属性
    Object.defineProperty(person, 'age', {
      value: 18
    })
    console.log(person)
    console.log(Object.keys(person))
    for (let key in person) {
      console.log(key, person[key])
    }
  </script>

1.3 使Object.defineProperty()添加的属性可枚举

默认情况下，使用Object.defineProperty()添加的属性是不可枚举的，在添加属性的时候，配置对象中 enumerable 的值设置为 true，则使用Object.defineProperty()添加的属性可以枚举。

  <script>
    let person = {
      name: 'zs',
      sex: 'male'
    }
    // 向person对象中新添加一个age属性
    Object.defineProperty(person, 'age', {
      value: 18,
      // enumerable 控制属性是否可以枚举，默认值为 false
      enumerable: true
    })
    console.log(person)
    console.log(Object.keys(person))
    for (let key in person) {
      console.log(key, person[key])
    }
  </script>

1.4 使Object.defineProperty()添加的属性值可以修改

默认情况下，使用Object.defineProperty()添加的属性的值是不可以修改的。

要使Object.defineProperty()添加的属性值可以修改，在添加属性时，配置对象的 writable 的值设置为 true，使用Object.defineProperty()添加的属性值可以修改。

  <script>
    let person = {
      name: 'zs',
      sex: 'male'
    }
    // 向person对象中新添加一个age属性
    Object.defineProperty(person, 'age', {
      value: 18,
      // enumerable 控制属性是否可以枚举，默认值为 false
      enumerable: true,
      // 控制属性值是否可以被修改，默认值为 false
      writable: true
    })

  </script>

1.5 使Object.defineProperty()添加的属性可以删除

默认情况下，使用Object.defineProperty()添加的属性的值是不可以删除的。

要使Object.defineProperty()添加的属性值可以删除，在添加属性时，配置对象的 configurable 的值设置为 true，使用Object.defineProperty()添加的属性值可以删除。

  <script>
    let person = {
      name: 'zs',
      sex: 'male'
    }
    // 向person对象中新添加一个age属性
    Object.defineProperty(person, 'age', {
      value: 18,
      // enumerable 控制属性是否可以枚举，默认值为 false
      enumerable: true,
      // 控制属性值是否可以被修改，默认值为 false
      writable: true,
      // 控制属性是否可以被删除，默认值为 false
      configurable: true
    })

  </script>

1.6 新添加的属性赋值为另外定义的变量

向对象中新添加的属性赋值为另外定义的变量，当变量的值发生改变时，对象中的新属性值也会对应的发生变化。

  <script>
    let number = 18
    let person = {
      name: 'zs',
      sex: 'male'
    }
    // 向person对象中新添加一个age属性
    Object.defineProperty(person, 'age', {
      // value: 18,
      // // enumerable 控制属性是否可以枚举，默认值为 false
      // enumerable: true,
      // // 控制属性值是否可以被修改，默认值为 false
      // writable: true,
      // // 控制属性是否可以被删除，默认值为 false
      // configurable: true

      // 当读取person的age属性的时候，get函数(getter)会被调用，且返回值就是age的值
      // get: function() {
      //   console.log('读取age属性')
      //   return number
      // }
      // 简写
      get() {
        console.log('读取age属性')
        return number
      },

      // 修改person的age属性的时候，set函数(setter)会被调用，且会收到修改的具体值
      set(value) {
        console.log('修改了age的属性值:', value)
      }
    })
  </script>

1.7 修改新添加的属性值同时修改对应的变量

当对象中新添加的属性值发生改变时，对应的变量值也会对应的发生变化。

  <script>
    let number = 18
    let person = {
      name: 'zs',
      sex: 'male'
    }
    // 向person对象中新添加一个age属性
    Object.defineProperty(person, 'age', {
      // value: 18,
      // // enumerable 控制属性是否可以枚举，默认值为 false
      // enumerable: true,
      // // 控制属性值是否可以被修改，默认值为 false
      // writable: true,
      // // 控制属性是否可以被删除，默认值为 false
      // configurable: true

      // 当读取person的age属性的时候，get函数(getter)会被调用，且返回值就是age的值
      // get: function() {
      //   console.log('读取age属性')
      //   return number
      // }
      // 简写
      get() {
        console.log('读取age属性')
        return number
      },

      // 修改person的age属性的时候，set函数(setter)会被调用，且会收到修改的具体值
      set(value) {
        console.log('修改了age的属性值:', value)
        number = value
      }
    })
  </script>

person 和 number 通过 Object.defineProperty() 中的 getter 和 setter 进行了关联。

2. 数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作(读/写)

  <script>
    let obj1 = {
      x: 100
    }
    let obj2 = {
      y: 200
    }
    // 通过obj2代理对obj1中x的操作(读/写)
    Object.defineProperty(obj2, 'x', {
      get() {
        return obj1.x
      },
      set(val) {
        obj1.x = val
      }
    })
  </script>

3. Vue中的数据代理

  <div id="root">
    <h1>学校名称：{{name}}</h1>
    <h1>学校地址：{{address}}</h1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        name: '学校名称',
        address: '学校地址'
      }
    })
  </script>

观察发现，vue实例中data的属性值的存在方式与通过Object.defineProperty()采用getter和setter向一个对象中添加一个变量作为属性的存在方式类似。

vue是通过Object.defineProperty()采用getter和setter将data中的属性放到vue实例上的。

Vue实例对象中的_data就是我们创建Vue实例时所写的配置对象中的data

<body>
  <div id="root">
    <h1>学校名称：{{name}}</h1>
    <h1>学校地址：{{address}}</h1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    let data = {
      name: '学校名称',
      address: '学校地址'
    }
    const vm = new Vue({
      el: '#root',
      data 
    })
  </script>
</body>

验证Vue中getter和setter：

<body>
  <div id="root">
    <h1>学校名称：{{name}}</h1>
    <h1>学校地址：{{address}}</h1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    let data = {
      name: '学校名称',
      address: '学校地址'
    }
    const vm = new Vue({
      el: '#root',
      data 
    })
  </script>
</body>

Vue实例对象中的_data不完全是我们所写的data，vue对其进行了数据劫持处理，为了能够实现在数据发生变化的时候，能够检测到数据发生了改变，从而页面的中对应的显示数据也能发生变化，实现页面的更新，实现页面的响应式操作。