VueJS 2中如何将user.fullName设为user对象下的计算属性？现有写法无效

这个问题我之前也碰到过！Vue 2的computed属性默认是挂载到实例顶层的，你直接用'user.fullName'作为键的写法其实是创建了一个名为user.fullName的顶层计算属性（可以通过this['user.fullName']访问），而不是嵌套到user对象里，所以自然没法通过user.fullName获取到值。

下面给你两种可行的解决思路：

方法一：通过计算属性返回包含fullName的完整user对象 #

如果你的user是定义在data中的基础对象，可以创建一个计算属性，把原user的属性和计算出来的fullName合并后返回：

export default {
  data() {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe'
      }
    }
  },
  computed: {
    userWithFullName() {
      // 展开原user的所有属性，再添加fullName计算属性
      return {
        ...this.user,
        fullName: `${this.user.firstName} ${this.user.lastName}`
      }
    }
  }
}

之后在模板或逻辑中就可以通过userWithFullName.fullName访问，而且当user.firstName或user.lastName变化时，fullName会自动更新。

方法二：给user对象添加响应式的getter属性 #

如果你希望直接通过user.fullName访问，更推荐在created钩子中用Object.defineProperty给user对象添加一个带getter的属性，这样既能保持嵌套结构，又能享受Vue的响应式追踪：

export default {
  data() {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe'
      }
    }
  },
  created() {
    // 给user对象定义fullName的getter
    Object.defineProperty(this.user, 'fullName', {
      get: () => {
        return `${this.user.firstName} ${this.user.lastName}`
      },
      enumerable: true, // 可选：让该属性能被枚举（比如console.log(user)时显示）
      configurable: true // 可选：允许后续修改该属性的配置
    })
  }
}

这样不管是在模板里写{{ user.fullName }}，还是在逻辑中调用this.user.fullName，都能得到正确的计算值，而且当firstName或lastName更新时，fullName会自动同步变化。

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