Vue 3 案例解析（第一部分）

本文撰写时间为2023年7月4日。若查阅时间较为久远，请注意相关版本的更新情况。

本文主要面向刚开始接触VUE的初学者，对Vue官方网站中的示例进行了详尽的解析。

在阅读本文之前，建议先学习以下内容：

Vue互动教程

Vue示例

快速上手 | Vue.js

本人倾向于通过添加详尽的注释来辅助学习，因此文中将尽量减少冗长叙述，确保代码与注释内容充足。接下来，我们正式开始。

1. 使用VSCode创建项目，并在src/compenonts目录下新建demo1.vue文件

 <!-- 在script标签加入setup,会将里面的代码被编译成组件setup()函数的内容 -->

    
 <!-- 在<script setup>中声明的变量,函数,在模板中可以直接使用 -->
    
 <script setup>
    
 //从vue导入ref,watchEffect
    
 //watchEffect:加载时执行一次,