Vue.js 组件创建方法

Question

我是 Vue 的新手，我想在每次渲染我的组件时进行一次 AJAX 调用。 我有一个 vue 组件，可以说“测试表”，我想通过 AJAX 调用来获取内容。有很多这样的表，我通过 v-if/v-else-if 等跟踪活动表。

目前我有一个欺骗性的解决方案：在组件的模板中，我通过
{{ getData }}
调用了一个名为 getData 的计算属性，它启动了 Ajax 调用，但只返回一个空字符串。我想切换到正确的方式，但不知道如何。

我的代码是这样的：（它的打字稿）

Vue.component("test-table", {
        props: ["request"],
        data () {
            return {
                tableData: [] as Array<TableClass>,
            }
        },
        template: `{{ getData() }} DO SOME STUFF WITH tableData...`,
        computed: {
            getData() : string {
                get("./foo.php", this.request, true).then(
                    data => this.tableData = data.map(element => new TableClass(data))
                )
                return "";
            }
        }
}

HTML：

<test-table v-if="testcounter === 1" :request="stuff...">
<test-table v-else-if="testcounter === 2" :request="other stuff...">
...

get 是一种异步方法，它只是将带有请求数据的 GET 请求发送到服务器。最后一个参数仅用于说明期望 JSON 作为答案的方法。类似于 JQuerys 的 getJSON 方法。

“创建”方法不起作用！它仅在组件首次创建时触发一次。如果我停用并再次激活（使用 v-if），则不会再次调用该方法。

顺便说一句：我使用的是 Vue 2.6.13

Answer 1

如果组件被缓存、保持活动等，生命周期钩子不会每次都触发

在每个生命周期钩子中添加一个console.log来查看。

更改为使用watcher，如果请求更改，它会再次处理触发 getData。

  ...
  watch: {
    request: {
      handler: function() {
        this.getData()
      },
      deep: true
    }
  },
  created() {
     this.getData()
  },
  methods: {
    getData(): string {
      // do request
    }
  }

Answer 2

如果您的组件使用v-if 连续渲染/取消渲染，您应该能够使用mounted 挂钩，如下所示：

export default {
    mounted() {
        // do ajax call here
        this.callAMethod();
    },
    ...
}

或者，您可以使用 created() 钩子，但它在链中较早执行，因此这意味着 DOM 模板尚未创建，因此您无法引用它。 mounted 通常是要走的路。

更多关于这些钩子的信息可以在here找到。

Answer 3

@FlorianBecker 尝试生命周期挂钩 updated()。它可能更适合您想要实现的目标。文档here.