Vue 2中如何从一个数据变量引用另一个数据变量？

嘿，这个问题我之前也踩过坑！咱们先搞清楚为啥会报错：

当你在data()返回的对象里直接写length: names.length时，JavaScript在创建这个对象的过程中，names属性还没被定义（毕竟对象的属性是按顺序初始化的），所以自然会抛出undefined的错误。而你试的this.names也不管用，是因为在这个返回的普通对象内部，this指向的并不是Vue组件实例，而是当前正在创建的这个对象本身，这时候this.names当然也不存在啦。

下面给你两种靠谱的解决办法：

方法一：使用计算属性（推荐） #

既然length是依赖names的动态值，Vue的计算属性天生就是干这个的——它会自动追踪依赖，当names变化时自动更新length，完全符合响应式的需求：

<script>
export default {
  data() {
    return {
      names: []
    }
  },
  computed: {
    namesLength() {
      return this.names.length
    }
  }
}
</script>

之后在模板里直接用{{ namesLength }}就行，完美适配响应式场景。

方法二：在生命周期钩子中初始化length #

如果非得把length放在data里，可以在created钩子中赋值，因为到了created阶段，Vue已经把data里的属性挂载到组件实例上了，this就能正常访问names了：

<script>
export default {
  data() {
    return {
      names: [],
      length: 0 // 先给个初始值
    }
  },
  created() {
    this.length = this.names.length
    // 如果之后names会动态更新，记得也要同步更新length哦，不过这种情况还是更推荐用计算属性
  }
}
</script>

总结一下，优先用计算属性，它是Vue处理这种依赖动态值场景的最佳实践，既简洁又能自动维护响应式～

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