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），會隨着所依賴的項發生改變而改變。

 

​轉載自：https://blog.csdn.net/s4944315/article/details/120313437