Vue中data函数内无法引用自身变量的问题求助

这个问题我之前也碰到过！核心原因是当你在data函数返回的对象里直接引用this.a.b时，这个返回对象还没被Vue实例化完成——此时this并不是你以为的Vue实例，而且a这个属性还在当前正在构建的对象里，自然就访问不到它的b属性了，this.$data也不行，因为$data也是在实例化后才挂载到this上的。

下面给你三种实用的解决办法，按需选择：

1. 用计算属性（最推荐，符合Vue响应式设计） #

把c改成计算属性，这样能确保a已经完成初始化，而且当a.b变化时，c会自动更新，完美适配你的场景：

export default {
  data() {
    return {
      value: '',
      a: { b: '123' }
    }
  },
  computed: {
    c() {
      // 这里的this已经是完整的Vue实例，能正常访问a.b
      return [this.a.b, "456"]
    }
  }
}

模板里还是用<span v-if="a && a.b"> {{c[0]}} </span>就行，完全不用改。

2. 在created钩子中赋值 #

如果你的c不需要跟着a.b动态变化，可以先把c初始化为空数组，等Vue实例创建完成后（created钩子阶段）再赋值：

export default {
  data() {
    return {
      value: '',
      a: { b: '123' },
      c: []
    }
  },
  created() {
    // 此时this已经指向Vue实例，data里的所有属性都能正常访问
    this.c = [this.a.b, "456"]
  }
}

注意这种方式下，后续如果a.b改变，c[0]不会自动更新，除非你手动重新赋值。

3. 在data函数内部先定义变量 #

你也可以在data函数里先把a的内容存成一个变量，再用这个变量构建返回对象，这样初始化时就能拿到正确的值：

export default {
  data() {
    // 先在函数内部定义a的内容
    const aObj = { b: '123' }
    return {
      value: '',
      a: aObj,
      c: [aObj.b, "456"]
    }
  }
}

同样，这种方式的c[0]是静态的，不会跟着a.b的变化自动更新。

总结一下，如果你需要c和a.b保持响应式关联，优先选计算属性；如果只是初始化时赋值，后两种方法都可以。

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