Vue中计算属性未生效:原因、排查与解决过程

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};

export default {
  data() {
    return {
      user: {
        firstName: 'John'
      }
    };
  },
  computed: {
    fullName() {
      return `${this.user.firstName} ${this.user.lastName}`;
    }
  }
};

computed: {
  fullName() {
    return `${this.firstName} ${this.last}`; // 错误的属性名
  }
}

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  methods: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};

export default {
  data() {
    return {
      user: {
        name: 'John Doe'
      }
    };
  },
  computed: {
    fullName() {
      return this.user.name;
    }
  },
  methods: {
    updateUser() {
      this.user = { name: 'Jane Doe' }; // 错误地覆盖了 user 对象
    }
  }
};

export default {
  data() {
    return {
      user: null
    };
  },
  computed: {
    fullName() {
      return this.user ? `${this.user.firstName} ${this.user.lastName}` : '';
    }
  },
  async mounted() {
    const response = await fetch('/api/user');
    this.user = await response.json();
  }
};

this.$set(this.user, 'lastName', 'Doe');

computed: {
  fullName() {
    console.log(this.firstName, this.lastName);
    return `${this.firstName} ${this.lastName}`;
  }
}

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

methods: {
  updateUser() {
    this.user = { ...this.user, name: 'Jane Doe' }; // 使用对象扩展
  }
}

computed: {
  fullName() {
    return this.user ? `${this.user.firstName} ${this.user.lastName}` : 'Loading...';
  }
}