|
| 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 |
0 commit comments