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"> 引用它，然后将打字稿放在那里。

这是一些关于 same/related 问题的文档。

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>

此外，除非您特别想使用打字稿，否则请在脚本标签中去掉 lang="ts"。

Vue单文件组件导入生命周期钩子

Vue single file component import lifecycle hooks

vue.js

vuejs3

snowpack