Vue组件数据获取逻辑的存放位置与REST请求执行时机咨询

执行时机与逻辑存放 #

1. 执行时机：
   • 如果数据是组件渲染必需的，优先在created（Vue 2）或onCreated（Vue 3）里发起请求——此时组件实例已创建，能访问响应式变量，而且DOM还没渲染，提前拿数据能避免页面闪烁。
   • 要是请求依赖DOM元素，再用mounted/onMounted。
   • 如果是路由页面组件，还可以用路由守卫（比如beforeRouteEnter）在进入路由前就预加载数据，等数据就绪再渲染页面，体验更流畅。
2. 逻辑存放：
   把REST请求的具体逻辑封装到你导入的api模块里（比如写个api.getArticle()方法），组件里只负责调用这个方法，把返回的title和content赋值给响应式变量就行。

为什么ready钩子没触发？ #

划重点：ready是Vue 1.x的专属钩子，Vue 2及之后的版本已经完全移除了！Vue 2+里替代它的是created或mounted，把代码里的ready换成这两个钩子之一就能正常触发了。

修正后的示例代码（Vue 2选项式） #

<template>
  <b-container class="bv-example-row">
    <h1>{{title}}</h1>
    <b-row>
      <b-col>
        {{content}}
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import api from './path/to/your/api.js' // 替换成你的api文件实际路径

export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  created() {
    // 组件创建后立即发起请求
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        // 调用api模块的请求方法
        const response = await api.getArticle()
        this.title = response.data.title
        this.content = response.data.content
      } catch (error) {
        console.error('数据获取失败:', error)
        // 这里可以添加错误提示逻辑，比如弹出报错信息
      }
    }
  }
}
</script>

关于props传递还是REST请求的选择 #

这个看业务场景：

• 如果title和content是父组件已经拿到、并需要传递给当前组件展示的（比如当前是通用展示组件），用props更合适。
• 如果当前组件是独立页面，需要自己从后端拉取数据，那就用REST请求。

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