如何在vue3中使用注解

在 Vue 3 中，注解是一种声明式编程的概念，主要用于数据绑定、条件渲染和组件的属性、事件等。Vue 提供了两种常见的注解：

1. **HTML 注解** (template syntax)：
- `<template>` 标签用于创建视图模板，其中可以使用 v-bind (`:`)、v-if (条件表达式)、v-for (数组循环) 等指令来进行注解。例如：

     <div v-if="isLoggedIn">Hello, {{ user }}!</div>

2. **JSX 风格注解** (script setup syntax)：
- 自 Vue 3.2 起，引入了 JSX 风格的语法糖，在 script setup 部分编写模板，使用 `setup()` 函数。例如：

     import { ref, onMounted } from 'vue';

     const isLoggedIn = ref(false);
     const user = ref('John Doe');

     onMounted(() => {
       isLoggedIn.value = true; // 设置登录状态
     });

     <template>
       <div v-if={isLoggedIn}>
         Hello, <span>{{ user }}</span>!
       </div>
     </template>

为了更好地管理复杂的组件逻辑，还可以使用自定义插槽 (`<slot>`)、计算属性 (`computed`)、watchers (`watch`) 等。