Vue.js：如何在created钩子中正确获取计算属性值？

首先明确说：完全可以在created钩子中访问计算属性，你遇到的问题根本不是钩子拿不到计算属性，而是计算属性依赖的数据源在created执行时还没准备好，导致计算属性返回了undefined而已。

咱们拆解下你的场景：你在created里调用了异步方法fetchPropertyOptions()，这个方法需要用到计算属性，但此时计算属性依赖的数据可能还没初始化、或者异步请求还没返回，所以计算属性只能返回undefined；等后续数据到位了，计算属性有值了，但你的fetchPropertyOptions()早就执行完了。

给你几个针对性的解决方案：

方案1：给计算属性的依赖数据设置默认初始值 #

如果计算属性依赖的是本地数据，那你在data里给这些数据设置合理的默认值（比如空数组、空对象），而不是让它们默认是undefined。这样计算属性就能基于初始值返回一个有意义的兜底结果，不会直接返回undefined。

举个实际代码例子：

export default {
  data() {
    return {
      // 给依赖的数据设初始值，别让它默认是undefined
      baseList: []
    }
  },
  computed: {
    filteredList() {
      // 即使baseList是空数组，也能返回空数组，而不是undefined
      return this.baseList.filter(item => item.status === 'active')
    }
  },
  created() {
    // 现在调用方法时，filteredList至少是个空数组，不是undefined
    this.fetchPropertyOptions()
  },
  methods: {
    async fetchPropertyOptions() {
      console.log(this.filteredList) // 这里能拿到兜底值
      // 你的异步逻辑...
    }
  }
}

方案2：等依赖的异步数据加载完成后再调用方法 #

如果计算属性依赖的是后端接口返回的数据，那你得先等这些数据拿到手，再去调用需要计算属性的方法。可以把数据请求和方法调用放在同一个异步流程里：

export default {
  data() {
    return {
      remoteData: null
    }
  },
  computed: {
    processedData() {
      // 兜底：如果数据还没加载，返回默认值
      if (!this.remoteData) return []
      return this.remoteData.map(item => item.id)
    }
  },
  async created() {
    // 先异步获取依赖的数据
    this.remoteData = await this.getRemoteData()
    // 数据到位了，计算属性就有正确值了，再调用方法
    this.fetchPropertyOptions()
  },
  methods: {
    async getRemoteData() {
      const res = await fetch('/api/get-data')
      return res.json()
    },
    fetchPropertyOptions() {
      console.log(this.processedData) // 这里能拿到正确的计算结果
      // 你的业务逻辑...
    }
  }
}

方案3：用watch监听计算属性的变化 #

如果依赖的数据加载时机不确定（比如可能从父组件异步传过来），那可以用watch监听计算属性，当它从undefined变成有效值时，再触发你的方法：

export default {
  computed: {
    targetComputed() {
      // 你的计算逻辑
      return this.someData ? this.someData.transform() : undefined
    }
  },
  created() {
    // 先检查当前计算属性是否有值，有就直接调用
    if (this.targetComputed !== undefined) {
      this.fetchPropertyOptions()
    }
  },
  watch: {
    targetComputed(newVal) {
      // 当计算属性变为有效值时执行方法
      if (newVal !== undefined) {
        this.fetchPropertyOptions()
      }
    }
  },
  methods: {
    fetchPropertyOptions() {
      // 放心使用this.targetComputed
    }
  }
}

最后再强调下：created钩子执行时，Vue已经完成了计算属性的初始化，是可以访问的。你的问题本质是计算属性的依赖项未就绪，只要解决这个点，就能正常使用啦！

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