目录

数据劫持（代理）

Vue监测数据变化原理及步骤：

一、监测对象中的数据

data对象加工成_data对象，并存入Vue实例

添加reactive getter和reactive setter：

数据变化监测效果

注意：

二、监测数组中的数据

在Vue修改数组中的某个元素需要用到以下方法:

数据劫持（代理）

数据劫持是实现数据代理的一种技术。Vue2.x中使用的是Object.defineProperty() ，因此我们有必要学习下这个函数的作用。

在MDN中有如下描述：

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

传入三个参数，被定义的对象obj、obj中的属性名、描述符。其中描述符分为数据描述法和存取描述符。这里主要使用存取描述符就可以实现数据代理。

Object.defineProperty 缺点

• 深度监听时，需要递归到底，一次性计算量大
• 无法监听新增属性/删除属性（所以开发中需要使用 Vue.set 和 Vue.delete 这两个 API 来增删 data 的属性）
• 无法原生监听数组，需要特殊处理

    let a = {
        name:"badspider"
    }

    let b = {}

    object.defineProperty(b,'name',{
            get(){
                    console.log('我被调用了')
                    return  a.name
        }
            set(value){
                    console.log('我被修改了')
                    return a.name = value
            }
    })

Vue监测数据变化原理及步骤：