Skip to content

Commit 1786b8c

Browse files
committed
chore: 升级版本到3.0.0
1 parent 6cf3956 commit 1786b8c

File tree

3 files changed

+61
-3
lines changed

3 files changed

+61
-3
lines changed

docs/v3.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
## 父组件可以明确指定依赖子组件
2+
父组件的template文件中就已经明确指定了依赖哪些子组件,所以这个是显而易见的。
3+
4+
## 子组件不要明确指定依赖父组件
5+
因为会导致子组件只能在特定父组件中使用,而不能随意迁移到其他组件中使用,子组件的复用性就太低了。
6+
7+
## 预期
8+
1. 【未实现】组件和服务是绑定的,生命周期是一致的。
9+
1. 假设某些场景就是多个组件实例共享服务,那么这个服务就不是组件服务,把这个服务看作属于父组件的服务就可以了。
10+
1. 【未实现】组件可以访问自身的服务,服务也可以访问自身的组件,从而可以无条件访问组件的props,emit等属性。
11+
2. 子组件可以快速获取父组件的服务
12+
1. 【推荐】最好是解耦父组件服务的引用,比如使用字符串获取symbol来作为父组件服务的key。
13+
2. 【不推荐】显示依赖父组件服务,子组件明确指定依赖哪个父组件的服务,从而获取该服务的实例对象。
14+
3. 父组件可以快速获取子组件的服务
15+
1. 【推荐】通过ref获取子组件实例,然后通过子组件实例访问子组件服务。
16+
2. 【强烈禁止】第一种方式是将子组件的服务的作用域提升到父组件级别,这样父组件就可以自动获取子组件服务实例对象了。但是这样会导致子组件和子组件服务的生命周期不一致。
17+
18+
19+
## 思考
20+
21+
目前现状基本都不是最佳实现或者未实现的特性。
22+
预期1和预期2未实现导致非常麻烦,很多场景不能在服务中实现,只能在组件中实现。
23+
预期3.2虽然不推荐,但是副作用也仅仅是子组件的复用性降低而已。
24+
预期4.2强烈禁止是因为导致父子组件服务的作用域非常不清晰,代码维护成本过高。
25+
26+
**待实现功能**
27+
1. 考虑使用inversify。本身体积比较小,代码质量也比我实现的要高。
28+
```
29+
先稍微介绍一下 inversify,它是一个轻量的(4KB)控制反转库,使用面向对象编程范式组织逻辑。
30+
```
31+
2. 组件和服务互相绑定,可以互相访问。
32+
1. 目前组件可以访问服务,只需要调用declareProviders即可。可以看看是否需要其他方案
33+
2. 服务获取组件目前还没有好的方案,可能需要在服务实例化时注入组件。其实这里隐含着服务和组件是一一对应的。也就是不会出现以下场景:
34+
1. 同一个组件实例关联多个相同服务实例
35+
2. 同一个服务实例关联多个组件实例
36+
3. 但是组件本身是可以关联多个不同服务实例的。
37+
3. 不再推荐直接通过服务Class名来实例化服务,每一个服务Class都需要一个别名字符串或者symbol对象。以实现子组件对父组件服务的解耦。
38+
1. 这属于工程问题,不属于技术问题。只需要提供工程规范约束即可。
39+
4. 增加markRaw属性装饰器
40+
41+
## class中使用vue3的响应式api
42+
注意到这里只能使用ref或者shallowRef等api,当然也可以使用reactive函数,但是它们都有一个特点就是不能重新直接赋值,只能修改reactive的属性,或者ref对象的value属性。
43+
所以我还是推荐对整个class实例对象进行reactive,然后可以针对部分属性进行markRaw
44+
```
45+
import { computed, shallowRef } from 'vue'
46+
import { injectable } from 'inversify'
47+
48+
@injectable()
49+
export class User {
50+
private userInfo = shallowRef<{ nickName: string }>()
51+
public nick = computed(() => {
52+
return this.userInfo.value?.nickName
53+
})
54+
}
55+
```
56+
57+
## 参考
58+
https://zhuanlan.zhihu.com/p/3604866493

package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kaokei/use-vue-service",
3-
"version": "2.0.5",
3+
"version": "3.0.0",
44
"description": "Use angular service in vue.",
55
"main": "./dist/index.cjs.runtime.min.js",
66
"module": "./dist/index.esm.runtime.min.js",

0 commit comments

Comments
 (0)