为什么vue2可以使用this.来调用data中的数据

在Vue2中，使用this来访问data中的属性，是因为Vue在实例化时对data对象中的每个属性进行了数据代理，将其转化为getter/setter。这样一来，当我们使用this来访问data中的属性时，实际上是在访问Vue实例的一个代理属性，而不是直接访问原始的data对象中的属性。

在getter函数中，Vue会返回原始的data对象中的属性值，而在setter函数中，Vue会将新的属性值保存到原始的data对象中。同时，Vue会通过响应式系统，检测到属性值的变化，并触发相关的更新操作，从而保证视图与数据的同步。

举个例子，如果我们有以下的Vue组件：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

那么在实例化时，Vue会将message属性转化为getter/setter，代码类似于：

const vm = new Vue({
  data: {
    message: 'Hello World'
  }
})

Object.defineProperty(vm, 'message', {
  get() {
    return this._data.message
  },
  set(newVal) {
    this._data.message = newVal
  }
})

这样一来，当我们在模板中使用{{ message }}时，实际上是在调用Vue实例的message属性的getter函数，而当我们在代码中使用this.message = 'new message'时，实际上是在调用Vue实例的message属性的setter函数。由于Vue实例的message属性是一个代理属性，因此在属性值发生变化时，Vue会通过响应式系统检测到变化并更新相关的视图。