V2EX › agileago 的所有回复 › 第 1 页 / 共 2 页

vue 本身的形式连外置声明一个属性类型都困难，更别说实现泛型组件了，这么说吧，tsx 比模版强太多了，再加上 ts 官方支持，写起来爽飞天，另外模板现在的黑魔法越来越多，为了补足模板的功能，你看官方出了多少工具函数，什么 defineProps, defineEmits ....., 为了 reactive 的结构又出了 toRefs.....等等，现在用模版心智负担太重，而 vue3-oop 让你忘记什么 ref, reactive,就是强调用自然符合直觉的写法来做界面开发

2023-08-07 18:26:49 +08:00

回复了 yetrun 创建的主题 › Vue.js › 准备写一个关于 Vue 的系列文章

包括你说的泛型组件，很轻易就实现了

[Imgur]( https://i.imgur.com/Nbkohba.png)

2023-08-07 18:16:35 +08:00

回复了 yetrun 创建的主题 › Vue.js › 准备写一个关于 Vue 的系列文章

跟 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>
}
}
```

代码是一步一步演化的

2023-08-07 17:41:02 +08:00

回复了 yetrun 创建的主题 › Vue.js › 准备写一个关于 Vue 的系列文章

啊，真的假的，怎么会觉得复杂呢？

2023-08-07 13:53:01 +08:00

回复了 yetrun 创建的主题 › Vue.js › 准备写一个关于 Vue 的系列文章

大兄弟，试试 vue3-oop https://github.com/agileago/vue3-oop, 遇到的问题都不是问题

2023-06-01 11:01:11 +08:00

回复了 ZGeek 创建的主题 › 程序员 › 从学校毕业以来，你感觉到最后悔的事情是什么

后悔的太多了，最后悔的事是人生大事仓促决定，应该多思考再做决定

2023-05-23 18:14:22 +08:00

回复了 webfansplz 创建的主题 › Vue.js › 写一个 Vue DevTools，让开发体验飞一会儿

https://github.com/agileago/fe-template 能适配一下这个模板么