vue.js - Vue 单文件组件导入生命周期钩子

Question

我需要帮助设置我的 Vue 应用程序（我只是在学习 vue）。

我在教程中读到要访问生命周期挂钩，我需要执行以下操作：

<template>
  <h4>Sports</h4>
  <li v-for="sport in sports" v-bind:key="sport.id">
    {{ sport.name }}
  </li>
</template>

<script lang="ts">
import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("component mounted");
    });
  },
  data() {
    return {
      sports: [],
    };
  },
};
</script>

但是，VSCode 的智能感知不能将 onMounted 识别为从 vue 导出的函数。当我在 snowpack 中运行我的代码时，它仍然无法识别该功能。

Answer 1

我认为这个问题可能是由于lang="ts"

您可以尝试将 js 放在单独的文件中并引用它，<script lang="ts" src="./myComponent.ts">然后将打字稿放在其中。

这是有人提出的一些文档，涉及似乎是相同/相关的问题。

https://github.com/patarapolw/vue-typescript-suggestions

Answer 2

您不需要导入它们，它们已经可用：

<template>
  <h4>Sports</h4>
  <li v-for="sport in sports" v-bind:key="sport.id">
    {{ sport.name }}
  </li>
</template>

<script>
export default {
  data() {
    return {
      sports: [],
    };
  },
  mounted() {
      console.log("component mounted");
  };
};
</script>

此外，除非您特别想使用 typescript，否则请不要在 script 标签中使用 lang="ts"。