vue3 oop 文档

类组件+自动化的依赖注入(可选) = 极致的代码体验 DEMO

$3

需要reflect-metadata 的支持

``shell
pnpm add @abraham/reflection injection-js
`

项目入口需要引入 reflect-metadata

`typescript
import '@abraham/reflection'
`

tsconfig.json 需要增加配置:

`json
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"useDefineForClassFields": false
}
}
`

$3

`shell
pnpm add vue3-oop
`

$3

因为esbuild不支持装饰器的metadata属性，所以需要安装 @vue3-oop/plugin-vue-jsx 插件使用原始ts编译

$3

`typescript jsx
import { Autobind, ComponentProps, Computed, Hook, Link, Mut, VueComponent } from 'vue3-oop'
import { Directive, VNodeChild, watch } from 'vue'

interface FooProps {
size: 'small' | 'large'
// 组件的slots
slots: {
item(name: string): VNodeChild
}
}

class Foo extends VueComponent {
// vue需要的运行时属性检查
static defaultProps: ComponentProps = ['size']

constructor() {
super()
// watch在构造函数中初始化
watch(
() => this.count,
() => {
console.log(this.count)
},
)
}

// 组件自身状态
@Mut() count = 1

// 计算属性
@Computed()
get doubleCount() {
return this.count * 2
}

add() {
this.count++
}

// 自动绑定this
@Autobind()
remove() {
this.count--
}

// 生命周期
@Hook('Mounted')
mount() {
console.log('mounted')
}

// 对元素或组件的引用
@Link() element?: HTMLDivElement

render() {
return (


`

$3

组件和服务的差距是缺少了render这一个表现UI的函数，其他都基本一样

`typescript
class CountService extends VueService {
@Mut() count = 1
add() {
this.count++
}
remove() {
this.count--
}
}
`

$3

Angular文档

- Angular 中的依赖注入
- 依赖提供者
- 服务与依赖注入简介
- 多级注入器
- 依赖注入实战

`typescript jsx
import { VueComponent, VueService } from 'vue3-oop'
import { Injectable } from 'injection-js'

// 组件DI
@Component({
providers: [CountService]
})
class Bar extends VueComponent {
constructor(private countService: CountService) {super()}

render() {
return

@Injectable()
class BarService extends VueService {
constructor(private countService: CountService) {super()}
}
``

$3

#### 微信

#### 支付宝

$3

$3

MIT