Vue2基础-Vue2中的数据代理（HTML版）

目录

• • 一、回顾JavaScript的defineProperty方法
  • 1. defineProperty的基本使用
  • 二、什么是数据代理？
  • 三、Vue中的数据代理

---

一、回顾JavaScript的defineProperty方法

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineProperty(object, propName, descriptor)

1. obj 需要定义属性的当前对象
2. prop 当前需要定义的属性名
3. desc 属性描述符

一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

1. defineProperty的基本使用

二、什么是数据代理？

通过一个对象代理对另一个对象中属性的操作（读/写），即可称为是数据代理

三、Vue中的数据代理

1. Vue中的数据代理：
   通过 vm对象 来代理 data对象 中属性的操作（读/写）
2. Vue中数据代理的好处：
   更加 方便 的操作data中的数据，简化了数据操作时的书写。
3. 基本原理：
   通过 Object.defineProperty() 把 data对象 中所有属性添加到 vm 上。
   为每一个添加到vm上的属性，都指定一个 getter/setter。
   在getter/setter内部去 操作（读/写） data中对应的属性。
4. 如果Vue没有数据代理会怎么样？
   在使用data中的数据时，需要this._data.xxx进行操作，光是看到就恐怖如斯。

    
    

        学校名称：{{name}}
        学校地址：{{address}}
    

源代码出处：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通