\n```\n\n### 嵌套路由\n\nSpeedy支持无限层级的嵌套路由：\n\n```jsx\nconst routes = [\n { \n path: '/user', \n component: UserLayout,\n children: [\n { path: '/profile', component: UserProfile },\n { path: '/settings', component: UserSettings },\n { \n path: '/posts', \n component: PostsLayout,\n children: [\n { path: '/list', component: PostList },\n { path: '/:id', component: PostDetail }\n ]\n }\n ]\n }\n];\n\n// 在父组件中使用RouterView\nfunction UserLayout() {\n return () => (\n \n
用户中心
\n {/* 子路由组件将在这里渲染 */}\n \n );\n}\n```\n\n### 动态路由参数\n\n使用冒号语法定义动态路由参数：\n\n```jsx\n// 路由定义\nconst routes = [\n { path: '/users/:id', component: UserDetail },\n { path: '/articles/:category/:slug', component: ArticleDetail }\n];\n\n// 在组件中访问参数\nimport { useParams } from 'speedy-jsx';\n\nfunction UserDetail() {\n const params = useParams();\n \n return () => (\n 用户ID: {params.value.id}
\n );\n}\n```\n\n### 查询参数\n\n访问URL查询参数：\n\n```jsx\nimport { useQuery } from 'speedy-jsx';\n\nfunction SearchPage() {\n const query = useQuery();\n \n return () => (\n \n
搜索结果
\n
关键词: {query.value.keyword}
\n
页码: {query.value.page || 1}
\n
\n \n \n
\n );\n}\n```\n\n特点：\n- 自动生成唯一类名\n- 支持动态属性（以`$`开头的props属性）\n- 支持嵌套选择器（使用`&`引用自身）\n- 响应式监听props变化自动更新样式\n\n### 关键帧动画\n\n使用`styled.keyframes`创建CSS动画：\n\n```jsx\nimport { styled } from 'speedy-jsx';\n\n// 定义一个淡入动画\nconst fadeIn = styled.keyframes({\n '0%': {\n opacity: 0,\n transform: 'translateY(20px)'\n },\n '50%': {\n opacity: 0.5,\n transform: 'translateY(10px)'\n },\n '100%': {\n opacity: 1,\n transform: 'translateY(0)'\n }\n});\n\n// 定义一个脉冲动画\nconst pulse = styled.keyframes({\n '0%': { transform: 'scale(1)' },\n '50%': { transform: 'scale(1.05)' },\n '100%': { transform: 'scale(1)' }\n});\n\n// 在样式中使用动画\nconst styles = styled.scope({\n animatedBox: {\n animation: `${fadeIn} 0.5s ease-out forwards`,\n padding: '20px',\n backgroundColor: '#f0f0f0'\n },\n pulsingButton: {\n animation: `${pulse} 1s infinite ease-in-out`,\n padding: '10px 20px',\n backgroundColor: '#0070f3',\n color: 'white',\n border: 'none',\n borderRadius: '4px'\n }\n});\n\nfunction AnimationExample() {\n return () => (\n \n
\n 这个元素会淡入\n
\n
\n
\n
卡片1
\n
卡片2
\n
卡片3
\n
卡片4
\n
\n
\n Speedy 样式系统演示
\n 展示样式系统的全部功能
\n \n \n
\n
\n \n
\n 样式化组件
\n 这是使用styled.div创建的卡片组件，支持动态属性和嵌套选择器。
\n \n
\n
数据加载中...
\n \n \n {(data) => 加载成功: {JSON.stringify(data)}
}\n \n \n {(error) => 加载失败: {error.message}
}\n \n \n );\n}\n```\n\n## 自定义指令\n\nSpeedy提供了自定义指令系统，用于复用与DOM元素交互的逻辑。指令是一种特殊的函数，可以对渲染的DOM元素执行底层操作。\n\n### 注册指令\n\n```javascript\nimport { directive } from 'speedy-jsx';\n\n// 注册一个简单的show指令\ndirective(\"show\", (el, update) => {\n // 设置update回调函数处理值变更\n update((oldValue, newValue) => {\n el.style.display = newValue ? 'block' : 'none';\n });\n\n // 可以注册多个update回调处理不同的逻辑\n update((oldValue, newValue) => {\n // 例如，添加过渡效果\n if (newValue) {\n el.style.opacity = '1';\n el.style.transition = 'opacity 0.3s';\n } else {\n el.style.opacity = '0';\n }\n });\n\n // 返回清理函数（可选）\n return () => {\n // 指令被移除时执行的清理操作\n console.log(\"清理show指令\");\n };\n});\n```\n\n### 使用指令\n\n在JSX或模板中，指令通过`use-`前缀添加到元素上：\n\n```jsx\nfunction ConditionalDisplay() {\n const visible = ref(true);\n \n const toggle = () => {\n visible.value = !visible.value;\n };\n \n return () => (\n \n
\n
\n 这个元素会根据visible的值显示或隐藏\n
\n
\n \n
\n );\n}\n\n// 在子组件中注入数据\nfunction Child() {\n const theme = inject('theme', { primary: '#000', secondary: '#fff' });\n \n return () => (\n \n 子组件内容\n
\n );\n}\n```\n\n## 批量更新和效果控制\n\n```javascript\nimport { batch, nextTick } from 'speedy-jsx';\n\n// 批量更新\nbatch(() => {\n count1.value++;\n count2.value++;\n count3.value++;\n}); // 只会触发一次更新\n\n// 下一个DOM更新后执行\nnextTick(() => {\n console.log('DOM已更新');\n});\n```\n\n## 生命周期钩子\n\n```jsx\nimport { onMounted, onUpdated, onUnmounted } from 'speedy-jsx';\n\nfunction MyComponent() {\n onMounted(() => {\n console.log('组件已挂载');\n });\n \n onUpdated(() => {\n console.log('组件已更新');\n });\n \n onUnmounted(() => {\n console.log('组件已卸载');\n });\n \n return () => 组件内容
;\n}\n```\n\n## 资源管理与清理\n\nSpeedy提供了强大的资源管理机制，通过`$runScope()`函数可以轻松管理组件中的各种资源，确保在组件卸载时自动清理，避免内存泄漏。\n\n### 基本用法\n\n```jsx\nimport { $runScope } from 'speedy-jsx';\n\nfunction TimerComponent() {\n const count = ref(0);\n // 获取运行作用域\n const run = $runScope();\n \n onMounted(() => {\n \n // 设置定时器，会在组件卸载时自动清理\n run.setInterval(() => {\n count.value++;\n }, 1000);\n });\n \n return () => 计数: {count.value}
;\n}\n```\n\n### 可用的资源管理API\n\n`$runScope()`提供了多种资源管理API：\n\n#### 定时器管理\n\n```jsx\nfunction TimerExample() {\n const message = ref('');\n const run = $runScope();\n \n onMounted(() => {\n \n // 设置定时器，自动清理\n run.setTimeout(() => {\n message.value = '已延迟3秒显示';\n }, 3000);\n \n // 设置循环定时器，自动清理\n run.setInterval(() => {\n console.log('每秒执行一次');\n }, 1000);\n });\n \n return () => {message.value}
;\n}\n```\n\n#### 事件监听器\n\n```jsx\nfunction EventListenerExample() {\n const mousePosition = ref({ x: 0, y: 0 });\n const run = $runScope();\n \n onMounted(() => {\n \n // 添加事件监听器，自动移除\n run.onWindow('mousemove', (e) => {\n mousePosition.value = { x: e.clientX, y: e.clientY };\n });\n \n // 也可以使用更通用的on方法\n const button = document.getElementById('my-button');\n if (button) {\n run.on(button, 'click', () => {\n console.log('按钮被点击');\n });\n }\n });\n \n return () => (\n 鼠标位置: {mousePosition.value.x}, {mousePosition.value.y}
\n );\n}\n```\n\n#### 动画帧管理\n\n```jsx\nfunction AnimationExample() {\n const position = ref(0);\n const run = $runScope();\n \n onMounted(() => {\n \n function animate() {\n position.value += 5;\n if (position.value < 500) {\n run.requestAnimationFrame(animate);\n }\n }\n \n // 开始动画，自动取消\n run.requestAnimationFrame(animate);\n });\n \n return () => (\n \n 移动的元素\n
\n );\n}\n```\n\n#### 网络请求管理\n\n```jsx\nfunction FetchExample() {\n const data = ref(null);\n const loading = ref(false);\n const error = ref(null);\n const run = $runScope();\n \n function loadData() {\n \n loading.value = true;\n error.value = null;\n \n // 创建可取消的fetch请求\n run.fetch('https://api.example.com/data')\n .then(response => response.json())\n .then(result => {\n data.value = result;\n loading.value = false;\n })\n .catch(err => {\n error.value = err.message;\n loading.value = false;\n });\n }\n \n onMounted(loadData);\n \n return () => (\n \n {loading.value &&
加载中...
}\n {error.value &&
错误: {error.value}
}\n {data.value &&
数据: {JSON.stringify(data.value)}
}\n
\n
\n
\n {messages.value.map((msg, i) => (\n
{msg.text}
\n ))}\n
\n
\n
\n
\n 被观察的元素\n
\n
元素{isVisible.value ? '可见' : '不可见'}
\n
尺寸: {elementSize.value.width} x {elementSize.value.height}
\n
第三方库示例
;\n}\n```\n\n#### 可取消的Promise\n\n```jsx\nfunction CancelablePromiseExample() {\n const data = ref(null);\n const loading = ref(false);\n const run = $runScope();\n \n function loadData() {\n loading.value = true;\n \n // 创建可取消的Promise\n const { promise } = run.createCancelablePormise((resolve, reject) => {\n // 模拟长时间运行的异步操作\n setTimeout(() => {\n resolve({ result: 'Success' });\n }, 3000);\n });\n \n promise\n .then(result => {\n data.value = result;\n loading.value = false;\n })\n .catch(err => {\n if (err.canceled) {\n console.log('操作已取消');\n } else {\n console.error('发生错误:', err);\n }\n loading.value = false;\n });\n }\n \n onMounted(loadData);\n \n return () => (\n \n {loading.value ?
加载中...
:
数据: {JSON.stringify(data.value)}
}\n
\n