源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods

为什么 Vue2 this 能够直接获取到 data 和 methods？

原因就在于Vue内部通过一些技巧将 data 和 methods 注入到组件实例上。在组件初始化的过程中，Vue会将 data 和 methods 进行响应式处理，并且将其转换为可观察的对象和函数。在此过程中，Vue会通过 Object.defineProperty() 把 data 对象上的属性转换为 getter 和 setter，并将这些属性添加到组件实例上作为组件的响应式数据。而对于 methods，Vue会将其直接挂载到组件实例上作为组件的方法。

示例1

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

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      }
    },
    created() {
      console.log(this.message)  // 在created生命周期中，this.message得到了正确的值
    }
  }
</script>

我们可以在组件的 created 生命周期中，通过 this.message 直接获取到组件的 data 数据。

示例2

<template>
  <div>{{ greeting('Vue') }}</div>
</template>

<script>
  export default {
    methods: {
      greeting(name) {
        return `Hello, ${name}!`
      }
    },
    created() {
      console.log(this.greeting('Vue'))  // 在created生命周期中，this.greeting得到了正确的值
    }
  }
</script>

同样地，我们也可以在组件的 created 生命周期中，通过 this.greeting() 直接获取到组件的 methods 方法。这种方式使得我们在开发Vue组件时，能够更加方便地访问组件的数据和方法，从而提高了编码效率。

综上所述，Vue2能够通过 this 直接获取到 data 和 methods 的原因是，Vue通过一些技巧将其注入到组件实例上，并可通过组件实例直接访问。在后续的组件开发中，如果需要访问数据或方法，直接使用 this 即可。