Vue组件中this关键字工作机制及跨对象访问props属性问题咨询

1. Vue组件中this关键字的工作原理 #

你代码里定义的anyobject只是组件配置对象，并非组件运行时的实际实例。Vue在初始化组件的过程中，会基于这个配置对象生成一个全新的组件实例，同时把配置中声明的props、data、computed、methods等所有属性和方法都挂载到这个实例上，并且会自动把所有配置内方法的上下文绑定到该组件实例，所以选项式API里所有方法、计算属性、生命周期钩子中的this，默认都指向当前组件的实例，而非你写的原始配置对象。

2. this可以访问tasks属性的原因 #

tasks是你在props配置项中声明的属性，Vue初始化时会把所有props定义的属性、data函数返回的属性、computed定义的计算属性全部代理到组件实例上，你不需要通过嵌套层级访问，直接用this就能调用。
你代码中incomplete计算属性里的this.tasks，本质是访问当前组件实例上代理的props属性，不是访问原始配置对象里的属性，自然可以正常取值。

代码说明 #

// 这只是组件配置对象，不会直接作为运行时的上下文
anyobject = {
  template: '#task-list',
  props: {
    // 这里声明的tasks会被Vue代理到组件实例上
    tasks: {default: []}
  },
  data() {
    return {
      // 这里的newTask同样会被代理到组件实例上，可通过this.newTask访问
      newTask: ''
    };
  },
  computed: {
    incomplete() {
      // 此处this指向Vue生成的组件实例，而非上面的anyobject对象
      return this.tasks.length; 
    }
  },

内容的提问来源于stack exchange，提问作者akmal hazim