vue中的数据代理（大白话）

前置知识

1.vue插值语法里的变量（或者this的形式）实际访问的是vue实例（vm）的属性和方法

2.数据代理：当我们读写一个对象的属性时，实质是读写的另一个对象的属性。如图：

const student = {
    name:'lili'
}

const student1 = {
  age:18
}

// 读写student的age属性的时候 实际读写的是student1的age属性
Object.defineProperty(student,'age', {
  get() { // 读age属性值时触发
    return student1.age
    },
    set(val) { // 重写age值时触发
    student1.age = val
    }
  })

vue中的数据代理

在我们new Vue 时，Vue 做了以下事情：

1.将配置项option里我们自定义的data属性里所有的值，收集作为_data的属性值（在这里会做数据劫持，这里不展开了），并挂载到vm实例上（可以理解为 option.data = vm._data）

2.将option.data的所有的属性及属性值，单个拎出并一 一挂载到vm实例上

3.通过数据代理的形式，当我们通过模板字符串或者通过this读写vm身上option拎出来的属性时，实际读写的是vm身上_data的属性