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

【问题标题】：Vue single file component import lifecycle hooksVue 单文件组件导入生命周期钩子
【发布时间】：2020-11-09 21:34:56
【问题描述】：

我在设置我的 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 中运行我的代码时，它仍然无法识别该功能。

【问题讨论】：

你在使用vue 3吗？使用npm install vue@next 安装。
是的，我就是这样安装的

标签： vue.js vuejs3 snowpack

【解决方案1】：

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

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

这是有人提出的一些关于相同/相关问题的文档。

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

【讨论】：

【解决方案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"。

【讨论】：