head 会单独写在 index.html 中，body 只放如下内容，包括会在 main 中 mount 的位置和引入 main 文件。
<body>
<div id="app"></div> <!-- 挂载点 -->
<script type="module" src="/src/main.ts"></script> <!-- 引入 main -->
</body>
mian 导入根组件并 createApp ，虽然叫根，但是其实可以创建多个啦，但应该一个就足够了。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App) // 创建应用实例
app.use(router) //
app.mount('#app') // 挂载
其他部分就和 React 差不多了… 在 App.vue 中导入 SFC 组件，各种嵌套，复用，传递 Props…
createApp 内可以可是一个对象，用 setup return 来暴露，这时候 mount 的组件内部就可以直接写 SFC 里 Template 里的内容。
组件、实例这些概念和 React 并无太多差异。
computed() 计算属性：感觉这个和 useMemo 差不多，是基于依赖变化更新的，所以是不能有副作用的。然后也是响应的，所以不是 useRef()。对于 VUE 来说，没有所谓的函数体，所以自然直接声明的变量就是在每次 render 时，不会响应的值。（响应指的是，将其放入模版中时，更新它，会导致模版发生变化，也就是 binding 的值。
onMounted() 注册周期钩子：应该是 useEffect 且没有 dependent 的时候。
watcher() 就是 useEffect 啦，但是会对那些响应值（由 reactive 创建）的深层变化做出响应，但是不推荐隐式的监听深层值，可以显示的用 getter() 暴露。
watchEffect() 就是自动加载 dependent 的 watcher()。
默认是在父组件更新后，自身更新前，那么拿不到 DOM，当然有个 post 选项可以拿到，称为后置的版本，可以直接用 watchPostEffect()。当然也可以在所有组件更新前，称为同步的版本，可以直接用 watchSyncEffect()。
尽量不要异步创建它，如有必要，记得关。