TypeScript+Vue3最新语法糖实践-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_30230009/article/details/124030480

本文介绍了Vue3的新特性，特别是`script setup`语法糖，详细讲解了响应式数据ref与reactive的使用，以及如何通过watch函数监听数据变化。此外，还探讨了computed函数在Vue3中的新用法。通过对Vue3的深入实践，作者分享了学习Vue3的体会和经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

清明3日假期对Vue3进行了较为系统的使用，本文会总结出对Vue3最新语法的实践，只会记录自己项目中使用到的语法，如果希望细致的过一遍Vue3的API，建议阅读官方文档。

对于官方文档，较好的方式是粗略过一遍官方文档，知道有这个东西，日后使用时，再回头来查阅，但前端工具之多，很多文档也读不完，此时我个人会以较新的开源项目作为学习对象，将其中使用的语法、技巧结合着文档学习。

此外感到难受的一点是，当时学React被它的Hooks恶心到了，但最近几天较为系统的了解了Vue3后，发现Vue3其实也往Hooks的路上走，当时React Hooks刚出，我就去学，除文档外，没啥资料，最终一知半解，在项目中用的少，现在Vue3已经出了一段时间了，而且国内很多资料，估计学起来，不会太费劲。

script setup语法糖

Vue3重要特点之一就是推出了Composition API写法，相比于Vue2是的Options API形式，基于Composition API组织的代码会很更加易于阅读与理解，相似功能的逻辑会放在一块，具体如下：

Vue3中通过setup函数来实现Composition API的写法，setup函数默接受props和context两个参数，其实现方式如下：

<script lang="ts">
export default {
  setup() {
    const name = "二两"
    return {
      // 需要将name暴露出去，template中才可以使用
      name
    }
  }
}
</script>

<template>
  <h1>{
   {name}}</h1>
</template>

当项目比较复杂时，setup函数必须要通过return将元素暴露出去的写法其实会比较麻烦，在Vue3.2时，推出了<script setup> 语法糖，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明以及 import 引入的内容) 都能在模板中直接使用，例子如下：

<script setup lang="ts">
import { ref } from 'vue';
const name: string = "二两"
</script>

<template>
  <h1>{
   {name}}</h1>
</template>

此外，普通的<script>只在组件首次被引入时执行一次，而<script setup>中的代码会在组件每次实例化是都执行。

在实际使用时，我遇到的一个问题是，怎么获得旧写法（setup函数写法）中的props和emit？其中props用于获得父组件传递下的数据，emit用于将子组件的数据传递给父组件。在<script setup>中需要