vue访问data内声明的属性，不需要带data

在 Vue 的源码中，实现访问 data 属性不需要带上 data 的功能是通过 proxy 函数来实现的。以下是一个简化的示例代码，演示了底层如何实现这一功能：

function proxy(target, sourceKey, key) {
  Object.defineProperty(target, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      return target[sourceKey][key];
    },
    set: function(val) {
      target[sourceKey][key] = val;
    }
  });
}

function Vue(options) {
  // 省略其他的初始化逻辑

  // 将data属性代理到Vue实例上
  if (options.data) {
    proxy(this, 'data', Object.keys(options.data));
  }
}

// 示例的使用方式
var vm = new Vue({
  data: {
    message: 'Hello, Vue!'
  }
});

console.log(vm.message); // Hello, Vue!

vm.message = 'Updated message';
console.log(vm.message); // Updated message

在上面的代码中，proxy 函数接受一个目标对象（即 Vue 实例）、一个源对象的键（data），以及要代理的属性的键（key）。在 get 方法中，当访问目标对象的某个属性时，会通过 target[sourceKey][key] 来获取对应的属性值。在 set 方法中，当修改目标对象的某个属性时，会通过 target[sourceKey][key] = val 来设置对应的属性值。

在 Vue 构造函数中，通过遍历 options.data 对象的所有键，调用 proxy 函数来实现将 data 中的属性代理到 Vue 实例上。这样一来，在访问和修改这些属性时，就不再需要使用 this.data.property 的语法，而可以直接使用 this.property。