本文为视频笔记，视频地址：https://www.bilibili.com/video/BV1hh411p79n

Vue3.2新特性

新的单文件组特性

<script setup>语法糖

<style> v-bind新特性
Web Components
性能提升
服务端渲染
Effect 作用域 API

这里我们主要讲解前两个新特性，本节讲解<script setup>语法糖

使用vite创建vue-ts项目

有关vite的更多详细信息请参考Vite中文网：https://vitejs.cn/

在terminal中输入npm init vite@latest my-vue-app -- --template vue-ts，创建一个vite + vue + ts的项目

使用vite创建vue-ts项目

使用npm run dev启动项目

启动项目

可以看到这是一个vite + TypeScript +vue的项目

Vue3.0语法

我们先使用vue3.0的常见组件写法，这里我们实现一个整数和一个按钮，使得点击按钮时整数会自增：

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
  const count = ref(1);
  const countIncrease = () => {
    count.value += 1
  }
  return {
    count,
    countIncrease
  };
  },
});
</script>

<template>
  {{ count }}
  <button @click="countIncrease">+</button>
</template>

<style scoped>
</style>

可以看到，我们编写的count和countAdd需要使用 return 语句进行导出，这样才可以在<template>中使用，而Vue3.2对此做了优化。

通过点击，我们使count增加到6

Vue3.2 语法

<script setup lang="ts">
import { ref } from "@vue/reactivity";

  const count = ref(1)
  const countIncrease = () => {
    count.value += 1
  }
</script>

<template>
  {{count }}
  <button @click="countIncrease">➕</button>
</template>

<style scoped>
</style>

首先让我们对比两种语法，看看vue3.2有什么不同：