跟 vue2 完全没啥关系,我是想达到一种自然的写法,你想想,你写的代码逻辑核心都在处理什么?难道不是处理变量和该变变量的函数么? 把变量和函数组织在一起的不就是类么?
下面这是个简单逻辑
```
class Count {
count = 1
add = () => this.count++
}
```
那对于界面开发,需要有渲染函数的存在, 另外得知道他是一个 vue 组件, 那就演变成下面这样子的设计
```
class Count extends VueComponent {
count = 1
add = () => this.count++
render() {
return <div onClick={this.add}>{this.count}</div>
}
}
```
那假如数据变了, 我要通知框架我要刷新了,那我怎么告诉框架呢?就变成下面的设计了,给这个变量标记一下是可变变量,变化的时候框架会自动更新
```
class Count extends VueComponent {
@
Mut() count = 1
add = () => this.count++
render() {
return <div onClick={this.add}>{this.count}</div>
}
}
```
这个时候随着组件逻辑的增加,导致组件代码激增,你想把代码拆分出去(类似 hook), 更好维护, 那代码就演变成下面这样子
```
// 服务 类似 useHooks
class CountService extends VueService {
@
Mut() count = 1
add = () => this.count++
}
class Count extends VueComponent {
countService = new CountService()
render() {
const { countService } = this
return <div onClick={countService.add}>{countService.count}</div>
}
}
```
但是你拆分逻辑不可能只有这一个 service, 就像你拆分成 useHook 一样, 当这些服务越来越多,并且之间会相互依赖,比如, B 依赖 A ,C 依赖 B ,C 又依赖 A , 那你得代码只能这样写
```
const A = useHookA()
const B = useHookB(A)
const C = useHookC(B, A)
```
这个时候加入某个服务的依赖调整了,你要去调整这一坨必须按顺序初始化的代码,是非常烦人的, 这个时候依赖注入就出场收拾残局了
```
class A extends VueService {
}
@
Injectable()
class B extends VueService {
constructor(private a: A) {
super()
}
}
@
Injectable()
class C extends VueService {
constructor(private a: A, private b: B) {
super()
}
}
@
Component()
class Count extends VueComponent {
constructor(private a: A, private b: B, private c: C) {
super()
}
render() {
const { a, b, c } = this
return <div onClick={countService.add}>{countService.count}</div>
}
}
```
代码是一步一步演化的