Vue3 Options API中created钩子无法访问data属性的问题

核心问题 #

你犯了一个基础的结构错误：把data()方法嵌套在了methods对象内部，这完全不符合Vue Options API的规范。Vue初始化组件时，只会在组件配置的根级别查找data()、methods、created这些选项，不会识别methods里的data()，导致组件实例根本没有初始化你定义的random_vids和count响应式属性，所有问题都源于此。

逐个解答你的疑问 #

• 为什么data()看似在created之后执行？
  不是data()执行顺序错了，而是你的data()根本没被Vue调用。Vue组件初始化流程中，根级data()会在created钩子执行前完成调用，将返回的对象转为响应式属性挂载到实例上。但你的data()位置错误，导致这一步完全没执行，所以created里访问属性时自然显示未定义。

• 数据已获取却无法立即渲染的原因？
  因为random_vids不是响应式属性，Vue无法追踪它的变化。你给this.random_vids赋值只是给实例添加了一个普通属性，不会触发视图更新。热更新时组件重新初始化，可能临时触发了属性识别，才会显示数据，但这不是正常流程。

• count不可用的问题？
  和random_vids同理，count没有被正确初始化为响应式属性，第一次console.log(this.count)输出undefined。后面直接赋值只是添加了非响应式属性，所以第二次能输出2，但不会触发视图更新。

修复后的代码 #

把data()移到组件配置的根级别，和methods、created同级：

<template>
  <p class="title">some title idk</p>
  <div>
    {{ random_vids }}
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "home_fitness",
  // data()移到根级
  data() {
    return {
      random_vids: [],
      count: 1,
      errorMessage: '' // 建议在这里初始化错误信息，保证响应式
    }
  },
  methods: {
    async getRandomVideos(){
      const path= "http://localhost:5001/random_videos"

      try {
        const res = await axios.get(path);
        this.random_vids = res.data; // 现在可以正确赋值并触发视图更新
      } catch (error) {
        this.errorMessage = error.message;
        console.error(error);
      }
    },
    testMethod() {
      console.log(this.count); // 现在会输出初始值1
      this.count = 2;
      console.log(this.count); // 输出2，若模板中用到count会自动更新视图
    },
  },

  created() {
    this.getRandomVideos();
    this.testMethod();
  }
};
</script>

额外说明 #

• 建议在data()里初始化所有需要响应式的属性（比如errorMessage），避免后续赋值时出现非响应式问题。
• 修复后，created钩子调用方法时，random_vids和count已经是响应式属性，API返回数据后会自动触发视图渲染，无需等待热更新。

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