Question

我在Vue Mastery上一门课程，发现了这样的代码：

    export default {
      data() {
        const times = []
        for (let i = 1; i <= 24; i++) {
          times.push(i + ':00')
        }
        return {
          event: this.createFreshEvent(),
          times,
          categories: this.$store.state.categories,
        }
      },
      methods: {
        createFreshEvent() {
          const user = this.$store.state.user
          return {
            organizer: user,
            attendees: []
          }
        }
      }
    }

为什么有时作者使用内联代码生成数据（时间）？
为什么他要为下一个data属性使用方法？有区别吗？
为什么data()不仅只有声明，而且我们没有在created()生命周期挂钩中生成以上所有内容？

Answer 1

对于问题1和3，最好问问创建者。没有真正的理由这样做。我不会像他那样做，但确实使用created或mounted方法。

问题2：

在组件的data选项中必须是一个函数，以便每个实例可以维护返回数据对象的独立副本：

https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

Answer 2

通过Vue对created生命周期挂钩的定义：https://vuejs.org/v2/api/#created

在创建实例后同步调用。在这个阶段，实例已完成对选项的处理，这意味着已设置：数据观察，计算属性，方法，观看/事件回调。但是，安装阶段尚未完成已启动，并且$ el属性尚不可用。

因此在data()中生成数据将不会触发任何相关的计算属性，即监视/事件回调。如果您在created中生成这些数据，并且您的组件在times上具有监视程序，则将有不需要的监视回调。

顺便说一句，我对categories中this.$store.state.categories的初始化感到困惑。无需从vuex将共享数据存储在本地data中。

Vue组件中的计算数据

2 个答案: