vue3 script setup + ts 实践

ts + setup

本文是对vue3.x 语法的实践，不会单独的介绍某个具体的 API 语法，详细语法请参考 vue官网；此次文章中使用的是 script setup + ts 的用法，个人比较喜欢的一种语法，感觉是 vue3 关于 ts 的终极实践。

顶层属性

任何在 script setup 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用; 但仅仅是使用，由于不是响应式数据，没有双向绑定，所以不会在页面上同步更新。

<template>
  <div>
    <h1>{
  { hello }}</h1>
    <p>
      {
  { count }}
      <button @click="handleClick">add</button>  
    </p>
  </div>
</template>

<script lang="ts" setup>
// 如果只是单类型，则 vue 会自动推到，不用加类型
let hello: string | undefined = "hello, vue";

// vue 根据后面的值，自动推导。
let count = 0;

function handleClick(): void {
  console.log(count);
  count++;
}
</script>

响应式数据

• ref: 用来给 基本数据类型 绑定响应式数据，访问时需要通过 .value 的形式， tamplate 不需要 .value，会被解析。
• reactive: 用来给 复杂数据类型 绑定响应式数据，直接访问即可。