# 源码结构
源码位置是在
packages文件件内，实际上源码主要分为两部分，编译器和运行时环境
1. 编译器
compiler-core核心编译逻辑compiler-dom针对浏览器平台编译逻辑compiler-sfc针对单文件组件编译逻辑compiler-ssr针对服务端渲染编译逻辑
2. 运行时环境
-
runtime-core运行时核心 -
runtime-dom运行时针对浏览器的逻辑 -
runtime-test浏览器外完成测试环境仿真
-
reactivity响应式逻辑 -
template-explorer模板浏览器 -
vue 代码入口，整合编译器和运行时
-
server-renderer服务器端渲染 -
share公用方法
# Vue 3初探
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hello vue3</title>
<script src="../dist/vue.global.js"></script>
</head>
<body>
<div id='app'><h1>{{message}}</h1></div>
<script>
Vue.createApp({
data: { message: 'Hello Vue 3!' }
}).mount('#app') </script>
</body>
</html>
@前端进阶之旅: 代码已经复制到剪贴板
# Composition API
Composition API字面意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的
# 1. 数据响应式
<div>count: {{ state.count }}</div>
<
