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

问题描述

我需要有关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中运行代码时，它仍然无法识别该功能。

解决方法

我认为该问题很可能是由于lang="ts"

您可以尝试将js保存在一个单独的文件中，并使用<script lang="ts" src="./myComponent.ts">对其进行引用，然后在其中输入打字稿。

有人想出了一些文档，它们似乎是关于同一/相关问题的。

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

,

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

<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”。