vue data中的this指向问题

在data里定义Object类型的变量时，会发现Object中访问不到vue的this属性。

例如：

export default {
  data(){
    return {
      a: "123",
      b: {
        c: this.a
      }
    };
  },
  created() {
    console.log("b: ", this.b.c); // undefined
  }
}

想在b中访问this.a的数据，直接访问会返回undefined，因为这时c中的this指向的是b。

这种情况可以用到Object的get属性进行属性定义。

例如：

export default {
  data(){
    return {
      a: "123",
      b: {
        _target: () => this,
        get target() {
          return this._target();
        },
        
        get c() {
          return this.target.a;
        },
      },
    };
  },
  created() {
    console.log("b: ", this.b.c); // 123
  }
}

此处将this映射到了Object变量内部，然后通过get的形式定义属性并获取。

当get定义的属性所依赖的属性的值发生改变时，get定义的属性的值也将发生改变。

例如：

export default {
  data(){
    return {
      a: "123",
      b: {
        _target: () => this,
        get target() {
          return this._target();
        },

        get c() {
          return this.target.a;
        },

        d: 123,

        get e() {
          return `依赖于d的值, 会同步发生改变, d的值为: ${this.d}`;
        }
      },
    };
  },
  created() {
    console.log("b: ", this.b.c); // 123

    console.log("e: ", this.b.e); // e:  依赖于d的值, 会同步发生改变, d的值为: 123 c: 123

    setTimeout(() => {
      this.b.d = 456;
      console.log("e: ", this.b.e); // e:  依赖于d的值, 会同步发生改变, d的值为: 456 c: 123
    }, 1000);

    setTimeout(() => {
      this.a = "456";
      console.log("e: ", this.b.e); // e:  依赖于d的值, 会同步发生改变, d的值为: 456 c: 456
    }, 2000);
  }
}

当前方法更像是一种深度计算属性（computed），会随着所依赖的项发生改变而改变。

前端开发交流讨论QQ群：477729296