文档: 完善文档

Author: agileago

docs/.vitepress/config.ts

@@ -1,14 +1,15 @@
 import type { UserConfig } from 'vitepress'
 // @ts-ignore
 import codetabs from 'markdown-it-codetabs'
+import type MarkdownIt from 'markdown-it'
 
 const config: UserConfig = {
   base: '/vue3-oop/',
   title: 'VUE3-OOP',
   description: 'vue3 oop是vue3开发进入面向对象阶段',
   markdown: {
     lineNumbers: false,
-    config(md) {
+    config(md: MarkdownIt) {
       md.use(codetabs)
     },
   },
@@ -32,16 +33,15 @@ const config: UserConfig = {
             { text: '使用指南', link: '/guide/' },
             { text: '组件', link: '/guide/component' },
             { text: '服务', link: '/guide/service' },
-            { text: '装饰器', link: '/guide/decorators' },
           ],
         },
         {
           text: '依赖注入',
           children: [{ text: '服务注入', link: '/guide/di' }],
         },
         {
-          text: '类型',
-          children: [{ text: '类型帮助', link: '/guide/type' }],
+          text: 'API',
+          link: '/guide/api',
         },
       ],
     },

docs/.vitepress/theme/index.js

@@ -1,4 +1,5 @@
+import Theme from 'vitepress/theme'
+import './theme.scss'
 import './codetabs.scss'
-import theme from 'vitepress/dist/client/theme-default'
 
-export default theme
+export default Theme

docs/.vitepress/theme/theme.scss

@@ -0,0 +1,6 @@
+$color: #16a8a7;
+
+:root {
+  --c-brand: #{$color};
+  --c-brand-light: #{lighten($color, 5%)};
+}

docs/guide/api.md

@@ -0,0 +1,126 @@
+# 基础类
+
+## VueComponent
+
+可传入泛型 `VueComponent<Props>`
+
+组件必须继承的类，并且必须实现`render`函数
+
+## VueService
+
+服务必须继承的类
+
+# 装饰器
+
+## Ref
+- Type: 属性装饰器
+
+声明变量为响应式
+
+```tsx
+class Foo extends VueComponent {
+  @Ref() count = 1
+}
+```
+
+## Computed
+- Type: 存取器属性装饰器
+
+计算属性，加了一层缓存
+
+```tsx
+class Foo extends VueComponent {
+  @Ref() count = 1
+
+  @Computed()
+  get doubleCount() {
+    return this.count * 2
+  }
+}
+```
+
+## Hook
+- Type: 方法装饰器
+- 'BeforeMount' | 'Mounted' | 'BeforeUpdate' | 'Updated' | 'BeforeUnmount' | 'Unmounted' | 'Activated' | 'Deactivated' | 'ErrorCaptured' | 'RenderTracked' | 'RenderTriggered' | 'ServerPrefetch'
+
+生命周期
+
+```tsx
+class Foo extends VueComponent {
+  @Hook('Mounted')
+  mount() {
+    console.log('mount')
+  }
+}
+```
+
+## Link
+- Type: 属性装饰器
+
+链接到组件或者元素
+
+```tsx
+class Foo extends VueComponent {
+  @Link() div?: HTMLDivElement
+
+  render() {
+    return <div ref="div"></div>
+  }
+}
+```
+
+## Autobind
+- Type: 类装饰器或者方法装饰器
+
+自动绑定方法的this
+
+```tsx
+// 可以直接绑定一个类，类下面的所有方法都会自动绑定
+@Autobind()
+class Foo extends VueComponent {
+  @Autobind() // 可单独绑定某个方法
+  add() {
+
+  }
+
+  render() {
+    return <div ref="div"></div>
+  }
+}
+```
+
+# 帮助函数
+
+## useProps
+
+获取当前组件的属性
+
+## useCtx
+
+获取当前组件的上下文
+
+## getCurrentApp
+
+获取当前的应用app
+
+# 类型
+
+## ComponentProps
+
+定义组件的props时使用
+
+```tsx
+interface FooProps {
+  size: 'small' | 'large'
+}
+class Foo extends VueComponent<FooProps> {
+  static defaultProps: ComponentProps<FooProps> = ['size']
+
+  render() {
+    return <div>{this.props.size}</div>
+  }
+}
+```
+
+
+

docs/guide/component.md

@@ -13,3 +13,147 @@ class Foo extends VueComponent {
   }
 }
 ```
+
+## 属性
+
+属性使用接口定义，在组件的 `props` 上面获取
+
+```tsx
+import { VueComponent, ComponentProps } from 'vue3-oop'
+
+interface Foo_Props {
+  size: 'small' | 'large'
+}
+
+class Foo extends VueComponent<Foo_Props> {
+  static defaultProps: ComponentProps<Foo_Props> = ['size']
+  render() {
+    return <div>{this.props.size}</div>
+  }
+}
+
+// 泛型组件
+interface Bar_Props<T = any> {
+  data: T
+  onChange: (item: T) => void
+}
+class Bar<T> extends VueComponent<Bar_Props<T>> {
+  static defaultProps: ComponentProps<Bar_Props> = ['data', 'onChange']
+  render() {
+    return <div 
+      onClick={() => this.props.onChange?.(this.props.data)}
+    >{this.props.data}</div>
+  }
+}
+
+```
+
+::: warning 注意！
+定义属性之后一定要在类的静态属性 `defaultProps` 定义 vue 需要的属性定义
+:::
+
+## 上下文
+
+组件的 `context` 属性上面存储这个组件的 `emit`, `slots`, `attrs`, `expose`, 
+就是setup函数的第二个参数
+
+```tsx
+import { VueComponent } from './component'
+
+class Foo extends VueComponent {
+  static inheritAttrs = false
+
+  render() {
+    return <div {...this.context.attrs}>foo</div>
+  }
+}
+```
+
+## 响应式变量
+
+响应式变量使用装饰器注解一下，主要有2个 `Ref` 和 `Computed`,此时忘记 `.value` 的事情，
+就是正常普通的变量定义，加上装饰器就是告诉框架当此变量变化的时候我要刷新视图
+
+```tsx
+class Foo extends VueComponent {
+  @Ref() count = 1
+
+  @Computed()
+  get doubleCount() {
+    return this.count * 2
+  }
+
+  render() {
+    return (
+      <div onClick={() => this.count++}>
+        {this.count}
+      </div>
+    )
+  }
+}
+```
+
+## 生命周期
+
+生命周期使用 `Hook` 装饰器
+
+```tsx
+class Foo extends VueComponent {
+  @Hook('Mounted')
+  mounted() {
+    console.log('foo mounted')
+  }
+
+  render() {
+    return <span>foo</span> 
+  }
+}
+```
+
+## watch
+
+watch在构造函数中使用, 构造函数其实就认为是 setup，你可以做任何在setup中使用的方法
+
+```tsx
+import { watch } from 'vue'
+
+class Foo extends VueComponent {
+  constructor() {
+    super()
+    watch(() => this.count, (n, o) => console.log('change', n, o))
+  }
+
+  @Ref() count = 1
+
+  render() {
+    return <span onClick={() => this.count++}>{this.count}</span>
+  }
+}
+```
+
+## 插槽
+
+slots本质上其实是属性的一部分，为了模板的需要单独给拿出来，他其实就是类似于 `react` 中的 `renderProps`,
+所以我们可以在属性定义的时候定义一下, 
+
+```tsx
+import { VNodeChild } from 'vue'
+import { VueComponent } from 'vue3-oop'
+
+interface Foo_Props {
+  slots: {
+    item(name: string): VNodeChild
+  }
+}
+
+// 此时如果只有slots的话就可以不用定义 defaultProps
+class Foo extends VueComponent<Foo_Props> {
+  render() {
+    return (
+      <div>
+        {this.context.slots.item?.('aaaa')}
+      </div>
+    )
+  }
+}
+```