跟 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>
}
}
```
代码是一步一步演化的