--- theme: healer-readable --- ## 写在前面本文的知识主要来源为本人观看vue conf上antfu演讲后做的总结和自己的经验。 ## 组合式api介绍 > 如果你已经了解vue3组合式api，并已经清楚知道它比vue2强大在何处，那么可以跳过这一节。 > 本节图片来源https://juejin.cn/post/7060752562332368932 先介绍一下vue3的组合式api，以一段切换暗色模式的组件代码为例子; vue2的写法： ```vue ``` 接下来是vue3组合式API的写法： ```vue ``` 如果想修改这个切换暗色模式的逻辑，你会怎么做呢？在vue2中，你需要先后在**data、computed、methods**中寻找这段逻辑有关的代码，然后再一个个修改，修改时要在代码上下跳转：而在vue3中，你只需要找到这块**逻辑集中**的地方，统一改动就可以了。这就引出了vue3的第一个优点：**逻辑关注点分离**。 vue2组织代码的形式是按照API类型来组织的，它把一个组件分成了很多不同的API块，如data、computed、methods、生命周期函数等等： ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d7e6abdb32ec4df894a21ee3bb409024~tplv-k3u1fbpfcp-zoom-1.image) 而vue3的代码，你可以自由按照功能逻辑来组织： ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c00c8929a61d4f8aa66fc342e3542dea~tplv-k3u1fbpfcp-zoom-1.image) 当然，当一个组件代码量过大的时候，vue3仍会有可读性的问题，这时候就需要拆分代码了。在vue2中，如果我们想要拆分出一段涉及到响应式变量（视图）逻辑，通常在定义一个组件，然后通过**mixins**来组合它们。但是mixins的有很多缺陷，最大的缺点就是**丢失上下文**，且拥有潜在的**命名冲突**，很多时候根本享受不到拆分带来的便利。那么，vue3应该怎么做呢？还是以这段逻辑为基础，我们先写出抽离后，我们想要的效果： App.vue: ```vue ``` 这样，如果我们需要改动暗色模式的逻辑，只用去修改useDark函数就可以了。如果只接触过vue2的同学可能不会理解，为什么这种涉及到模板变量的逻辑也可以被单独抽到一个函数里？这就引出了vue3第二个强大之处：**vue3的响应式系统可以独立在组件外使用**！ composible.ts: ```typescript import { ref, computed } from 'vue' export function useDark(){ const dark = ref(false) const light = computed(() => !dark.value) const toggleDark = ()=>{ dark.value = !dark.value } return{ dark, light, toggleDark } } ``` 这样把逻辑拆成一个函数，而函数中**可以单独使用vue响应式系统提供的api**，甚至可以单独使用**生命周期钩子**，这种函数我们一般称为vue3的**hook函数**。多个hook函数可以灵活组合，每个hook函数里也可以使用其他hook。最终，一个vue3页面的架构应该如下图所示： ![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09fcb6cccc2740959257c96bc29f3c6b~tplv-k3u1fbpfcp-zoom-1.image) 至于什么时候拆分，如何拆分，这就看具体的场景和个人习惯了，大家可以参考一下vueuse项目：https://vueuse.org/，或者github上的一些admin项目。总结： | 声明式api | 组合式api | | ----------------- | ------------------------------------ | | 不利于复用 | 极易复用（原生JS函数） | | 潜在命名冲突 | 可灵活组合（生命周期钩子可多次使用） | | 上下文丢失 | 更好的上下文支持 | | 有限的类型支持 | 完善的Typescript支持 | | 按API类型组织 | 按功能逻辑组织 | | 只能用于vue组件中 | 可在vue组件外独立使用 | ## hook函数编写模式与技巧 ### ref和reactive怎么选择？这里有个偷懒的选择方法，但也经过了很多库的实践：**能使用ref的情况下就使用ref**。原因如下： **ref可以显式调用.value，触发类型检查** 例如 `let foo = ref(1)`如果不小心给foo赋值了一个普通变量`foo = 2`，TS编译器会报错，然后加上.value，你就能区分这是个响应式的变量，而reactive可能会和普通变量混淆。 **ref比起reactive局限更少** reactive可以自动解包，但是有一些坏处: - 在类型上和一般对象没有区别 - 使用ES6解构会导致响应式丢失（toRef） - 需要使用箭头函数包装才可以进行watch - ```typescript const foo = { prop: 0 } const bar = reactve({ prop: 0 }) foo.prop = 1 bar.prop = 2 //这种代码看上去，这两个变量没有区别，需要去检查初始化的代码才能知道 ``` 有很多同学刚开始用vue3，可能不太喜欢.value的使用，但其实ref在很多情况下会被vue自动解包： - watch监听时 - 模板中（同时在模板中赋值也不用.value） - ```typescript //使用reactive包裹嵌套的ref也会自动解包 const foo = ref('bar') const data = reactive({ foo, id }) data.foo = bar //ok ``` ### unref - Ref的反操作原理：如果传入ref，则返回其值，否则就原样返回。实现： ```typescript import { isRef } from 'vue' function unref( r: Ref | T ): T { return isRef(r) ? r.value : r } ``` 该函数已于正式版中被vue3官方收编，直接使用： ```typescript import { unref } from 'vue' ``` 有了这个函数，我们就可以进行一些比较无脑的写法： ```typescript import { ref, unref } from 'vue' const foo = ref('foo') unref(foo) // foo const bar = 'bar' unref(bar) // bar ``` 这在hooks多重嵌套时将会很有帮助。 ### 模式：接受ref作为函数参数先来一个纯函数： ```typescript function add(a: number, b: number) { return a + b } ``` 这个函数的结果不会依赖a和b之后变化。接下来是接受ref作为参数的函数： ```typescript import { Ref, computed } from 'vue' function add( a: Ref, b: Ref ){ return computed( ()=> a.value + b.value ) } ``` 这样，函数的结果也是一个ref，它也会永远依赖与a和b的值( computed )。更加灵活的写法，同时接受ref和字面量： ```typescript import { Ref, computed, unref } from 'vue' function add( a: Ref | number, b: Ref | number ){ return computed( ()=>unref(a) + unref(b) ) } ``` 使用起来很无脑： ```typescript const a = ref(1) const c = add( a,5 ) console.log( c.value ) //6 a.value = 2 console.log( c.value ) //7 ``` ### MaybeRef类型工具如果不太了解TS的类型工具编写，可以先学习后再进行实践。 MaybeRef类型工具实现： ```typescript type MaybeRef = Ref | T ``` 很简单但是很实用，在vueuse库中就大量使用了这个类型工具。假如不使用Mayberef： ```typescript export function useTimeAgo( time: Date | number | string | Ref ){ return computed( ()=> someFormating( unref(time) ) ) } ``` 可以看到参数类型非常繁琐，可以使用MaybeRef进行简化： ```typescript export function useTimeAgo( MaybeRef ){ return computed( ()=> someFormating( unref(time) ) ) } ``` ### 编写更加灵活的hook 尽量让函数可以灵活的使用，以vueuse中的`useTitle`函数举例，该函数控制页面的title标签。使用： ```typescript // 通常用法 const title = useTitle() title.value = 'Hello World' // 更加灵活的用法 const name = ref('Hello') const title = computed( ()=> `${name.value} World` ) useTitle(title) //此时title和页面的title建立了连结 name.value = 'Hi' //页面标题变成 Hi World ``` 实现 ```typescript import { ref, watch } from 'vue' import { MaybeRef } from '@vueuse/core' function useTitle( newTitle: MaybeRef){ const title = ref(newTitle ?? document.title) //核心 watch(title, (t)=> { if(t){ document.title = t } }, { immediate: true }) } ``` 可以看到，这个hook使用`watch` api让自己变得更加灵活，我们在编写hook时也应该时刻考虑如何让它更灵活。 ### 重复使用已有的ref 新手可能会编写这种代码： ```typescript const foo = ref(1) // ... const bar = isRef(foo) ? foo : ref(foo) const bar = ref(foo) ``` 在不确定类型时会进行这种判断，但其实并不需要。 **因为如果一个ref被传递给ref构造函数，它将原样返回** ```typescript const foo = ref(1) const bar = ref(foo) foo === bar // true ``` ### 模式：由ref组成的对象在hook中返回由ref组成的对象，会让hook的使用更加灵活： ```typescript function useMouse() { // ... return { x: ref(0) y: ref(0) } } //可以直接使用 const { x } = useMouse() x.value // 0 //也可以自动解包（不需要.value) const mouse = reactve(useMouse()) mouse.x // 0 ``` 记住这个模式的编写和使用，很省事。 ### 技巧：将异步操作转换为同步写法以vueuse中的`useFetch`hook为例，使用： ```typescript // 原生fetch const data = await fetch('url').then( r=> r.json ) // useFetch const data = useFetch('url').json const user = computed( () => data.value ? data.value.user ) ``` 大概的实现如下： ```typescript function useFetch( url: MaybeRef ){ const data = shallowRef() const error = shallowRef() fetch(unref(url)) .then(c => c.json) .then(r => data.value = r) .catch(e => error.value = e) return { data, error } } ``` 关于`shallowRef`，可以参考下vue官方文档哦。 ### 重点：清除副作用首先，编写hook时记得清除自己创造的副作用： ```typescript import { onUnmounted } from 'vue' export function useEventListener(target: EventTarget, name: string, fn: any){ target.addEventListener(name, fn) onUnmounted(()=>{ target.removeEventListener(name, fn) // <-- }) } ``` 但是有另外一种特殊的副作用也需要清除，在vue的`setup()`中，watch、computed等副作用会被收集并且绑定到当前组件实例上，当实例`unmounted`时，这些副作用会被vue释放。但我们在编写独立hook时，没有vue帮我们来处理这种脏活了，我们需要自己处理这种情况, 比如，先收集`computed`和`watch`： ```typescript const disposables = [] const counter = ref(0) const doubled = computed(() => counter.value * 2) disposables.push(() => stop(doubled.effect)) const stopWatch1 = watchEffect(() => { console.log(`counter: ${counter.value}`) }) disposables.push(stopWatch1) const stopWatch2 = watch(doubled, () => { console.log(doubled.value) }) disposables.push(stopWatch2) ``` 然后手动释放： ```typescript disposables.forEach((f) => f()) disposables = [] ``` 我们不想每次编写hook都要干这种脏活。还好，vue3.2提供了一个专门处理这种情况的api：`effectScope`。 `effectScope`会收集在它内部的`effect`、`computed`、`watch`、`watchEffect`，然后提供了函数来释放。 ```typescript function useXXX() { // ... const scope = effectScope() //副作用写在run的回调函数中 scope.run(() => { const doubled = computed(() => counter.value * 2) watch(doubled, () => console.log(doubled.value)) watchEffect(() => console.log('Count: ', doubled.value)) }) //释放所有副作用 scope.stop() } ``` 记得要用哦。 ### 类型安全的Provice & Inject 如果不知道这个玩意，我们在写`Provide`和`Inject`时会丢失类型（也就是变成any）。这个玩意就是`injectionKey`： ```typescript //context.ts import { injectionKey } from 'vue' export interface UserInfo{ id: number name: string } ``` ```typescript //父组件 export const injectKeyUser: injectionKey = Symbol() import { provice } from 'vue' import { injectKeyUser } from './context' export default { setup(){ provice( injectKeyUser, { id: 1, name: 'xxx' }) } } ``` ```typescript import { inject } from 'vue' import { injectKeyUser } from './context' export default { setup(){ const user = inject(injectKeyUser) if(user){ console.log( user.name ) //ok } } } ``` 这样就可以给他们类型了。 ### 模式：状态共享也许你已经看了一些关于vue3并不需要状态共享的文章了。为什么说在vue3中可以不需要vuex这种状态管理工具？因为组合式API可以独立于组件被使用，所以天然可以被组件共享： ```typescript //store.ts import { reactive } from 'vue' export const store = reactive({ state: { foo: 'bar' } }) ``` ```typescript //A.vue import { store } from 'store' store.state.foo = 'yeah' ``` ```typescript //B.vue import { store } from 'store' console.log(store.state.foo) // 'yeah' ``` vue3官方推荐状态管理库`pinia`就是类似这种模式。 ### 让vue2也能用上组合式api 插件`@vue/composition-api`是可以为vue2提供组合式API的插件，可以使用以上所有的技巧！此外，vue2.7版本也会官方支持以下特性： - 将vue/composition-api整合进vue2核心 - 支持setup script - 将vue2代码迁移到typescript - vue2将继续支持ie11 - LTS 如果不想从vue2直接升级到vue3，可以一起期待vue2.7的到来哦。另外，对于vue组件库作者来说，可以引入**vue-demi**，这样你的包既可以使用组合式api，又可以同时兼容vue2和vue3！