vue3 script setup + ts 实践

ts + setup

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

顶层属性

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

响应式数据

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

使用 watch 优化上面的例子

1. 从 vue 中结构 watch;
2. watch 是一个函数，可以一次写多个，也可以一次性监听多个例子；

使用 computed

使用生命周期

将 生命周期方法 从 vue 结构后，它是一个函数，传入 callback 后即可执行。

props and emit

这是基于 ts 的写法，所以按照泛型的形式传入，如果不是 ts ，可以按照 vue 的语法进行实现。