Vue3 + ts的使用（选项式API，组合式API）

朝阳若蓝

已于 2024-01-16 18:01:46 修改

阅读量547

点赞数

分类专栏： # L4：Vue 文章标签： vue3 ts

于 2023-09-01 10:42:35 首次发布

本文链接：https://blog.youkuaiyun.com/diaoweixiao/article/details/132610708

版权

L4：Vue 专栏收录该内容

29 篇文章

订阅专栏

一. IDE的配置

1. VSCode 插件安装搜索@builtin typescript

2. 点击“TypeScript and JavaScript Language Features”右下角的小齿轮，然后选择“Disable (Workspace)”

3. 重新加载工作空间。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。

二. 依赖的安装

vue add typescript

三. 使用语法

1.不加setup的用法（选项式API）

<template>
  <div>{{ count.toFixed(2) }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  data() {
    return {
      count: 1
    }
  },
  methods: {},
  mounted () {}
})
</script>

2.加setup的用法（组合式API）

<template>
  <div>{{ (x as Number).toFixed(2) }}</div>
</template>
<script setup lang="ts">
let x: String | Number = 1

function increment () {}

onMounted(() => {})
</script>

组合式API的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对Vue的响应式系统有更深的理解才能高效使用。响应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

选项式API：当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用Vue，例如渐进增强的应用场景，推荐采用选项式API。

组合式API：当你打算用Vue构建完整的单页面应用，推荐采用组合式API + 单文件组件。