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 以查看。

如果请求发生变化，更改为使用一个处理再次触发 getData 的watcher程序。

  ...
  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通常是要走的路。

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

Answer 3

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