javascript - 组件获取逻辑应该放在哪里？

Question

对于 vue 组件 Page，我从 REST 请求检索其数据(或者可能是 props？)title 和 content。我应该什么时候执行此 REST 获取请求？逻辑应该驻留在哪里？

现在我尝试获取组件ready，但此函数从未执行:

<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 '../../api'

export default {
    data() {
        return {
            id: '',
            slug: '',
            title: '',
            content: ''
        };
    },

    ready() {
        console.log('foo');
        this.fetchData();
    },

    methods: {
        fetchData() {
            api.getPageBySlug('sample-page', page => {
                this.$set('title', page.title);
                this.$set('content', page.content);
            });
        }
    }
};
</script>

Answer 1

Vue.js 2 中不存在 ready() 钩子(Hook)。

您可以将 Ajax 代码放置在许多 Hook 中。更常见的是使用 the following lifecycle hooks 之一:

• beforeCreate()
• 创建()
• 在Mount()之前
• mounted()。

那么，什么应该指导你的决定呢？有些事情你必须考虑。

首先:Vue的初始化代码是同步执行的。

这意味着，从技术上讲，您在任何这些 Hook 中运行的任何异步代码只会在所有这些 Hook 结束后响应。查看演示:

new Vue({
  el: '#app',
  beforeCreate() {
    setTimeout(() => { console.log('fastest asynchronous code ever (started at beforeCreate)') }, 0);
    console.log('beforeCreate hook executed');
  },
  created() {
    console.log('created hook executed');
  },
  beforeMount() {
    console.log('beforeMount hook executed');
  },
  mounted() {
    console.log('mounted hook executed');
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="app">
  Check the console.
</div>

换句话说，如果您在 beforeCreate 中进行 Ajax 调用，无论 API 响应多快，响应只会在稍后、在创建之后处理。 created() 已执行。

使用哪个钩子(Hook)？

• 只需尽快触发调用？
  • 使用beforeCreate()
  • 为什么？
    • 它的运行速度比任何这些钩子(Hook)都快，但是......
• 需要立即读取或修改数据？
  • 使用created()
  • 为什么？
    • State is only initialized between beforeCreate() and created() ，所以如果你assign some data before created(), it would be lost .
• 需要 created() 之后生成的任何内容吗？
  • 使用beforeMount()
  • 为什么？
    • 我不知道任何 created() 中不可用但 beforeMount() 中可用的内容 other than the compiled this.$options.render render function (参见source as well)，所以这种情况确实是一种罕见的情况。
• 需要 DOM 中的任何内容(例如 ref)？
  • 使用mounted()
  • 为什么？因为这些只能在 mounted() 钩子(Hook)上使用。

使用 Vuex 全局管理状态时

如mentioned in comments ，一种常见的方法是使用 Vuex 来全局管理应用程序的状态。在这种情况下，请求应在 Vuex actions 中启动。 。然后，您的组件在任何生命周期 Hook (或方法)中都会分派(dispatch)操作。请参阅下面的演示。

const store = new Vuex.Store({
strict: true,
  state: {
    people: []
  },
  mutations: {
    populate: function (state, newPeople) {
      state.people = newPeople
    }
  },
  actions: {
    fetchPeople ({ commit }) {
      axios.get('https://reqres.in/api/users').then(function (response) {
        commit('populate', response.data.data)
      }, function () {
        console.log('error')
      })
    }
  }
});

Vue.component('mycomp', {
  computed: Vuex.mapState(['people']),
  template: `
    <ul>
      <li v-for="p in people">
      {{ p.first_name }} {{ p.last_name }}
      </li>
    </ul>
  `
});

new Vue({
  store,
  el: '#app',
  created() {
    this.$store.dispatch('fetchPeople');
  },
  computed: Vuex.mapState(['people']),
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  In parent:
  <ul>
    <li v-for="p in people">
      {{ p.first_name }} {{ p.last_name }}
    </li>
  </ul>
  <hr>
  In custom component (the very same data, fetched only once):
  <mycomp></mycomp>
</div>