`data` 在 vue.js 的 `created` 方法中不可用

Question

我试图从我的created()方法中访问组件数据，但它似乎不可用（未定义）。 那我该如何访问数据呢？

<script>
import MainLayout from './MainLayout.vue'
import axios from 'axios'

export default {
  components: { MainLayout },
  data: {
    loading: false,
    mytest: 123,
    table: {
      columns: [],
      data: [],
      total: 0,
    }
  },
  name: 'Entities',
  created: async function() {
    console.log(this.loading, this.table, this.mytest) // undefined, undefined, undefined

  },
}
</script>

Answer 1

请改用mounted()方法。

Answer 2

vuejs 官方文档在这里当你使用 .vue 单个组件时，数据应该是一个函数，它应该返回数据，如果你在脚本标签内的普通 html 中使用 vue，那么你可以使用数据作为对象

Answer 3

仍然不确定它为什么起作用，但是将data从对象转换为函数是有效的：

 data: function () {
    return {
      loading: false,
      mytest: 123,
      table: {
        columns: [],
        data: [],
        total: 0,
      }
    }
  },

Answer 4

我认为这是 Vue.js 的预防措施 - 数据属性必须是函数 - 所以如果使用数据属性作为对象而不是返回每个新对象的函数，vue 会显示错误消息

Answer 5

只有当组件挂载时，才能访问数据本身。

所以如果你想访问data ，你应该等待组件挂载，例如将代码放入mounted的生命周期中。