14-Vue的CompositionAPI

前言

本文章来源于王红元老师（coderwhy）的 Vue3 + Ts 课程
附上链接：https://ke.qq.com/course/3453141
谁能拒绝一个*100%好评还加课的老师呢

Options API的弊端

• 在Vue2中，我们编写组件的方式是Options API：
  • Options API的一大特点就是在对应的属性中编写对应的功能模块；
  • 比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命 周期钩子；
• 但是这种代码有一个很大的弊端：
  • 当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；
  • 当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；
  • 尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）；
• 下面我们来看一个非常大的组件，其中的逻辑功能按照颜色进行了划分：
  • 这种碎片化的代码使用理解和维护这个复杂的组件变得异常困难，并且隐藏了潜在的逻辑问题；
  • 并且当我们处理单个逻辑关注点时，需要不断的跳到相应的代码块中；

大组件的逻辑分散

• 如果我们能将同一个逻辑关注 点相关的代码收集在一起会更 好。
• 这就是Composition API想 要做的事情，以及可以帮助我 们完成的事情。
• 也有人把Vue Composition API简称为VCA。

认识Composition API

• 那么既然知道Composition API想要帮助我们做什么事情，接下来看一下到底是怎么做呢？
  • 为了开始使用Composition API，我们需要有一个可以实际使用它（编写代码）的地方；
  • 在Vue组件中，这个位置就是 setup 函数；
• setup其实就是组件的另外一个选项：
  • 只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项；
  • 比如methods、computed、watch、data、生命周期等等；
• 接下来我们一起学习这个函数的使用：
  • 函数的参数
  • 函数的返回值

setup

setup函数的参数

• 我们先来研究一个setup函数的参数，它主要有两个参数：
  • 第一个参数：props
  • 第二个参数：context
• props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup中如果需要使用，那么就可 以直接通过props参数获取：
  • 对于定义props的类型，我们还是和之前的规则是一样的，在props选项中定义；
  • 并且在template中依然是可以正常去使用props中的属性，比如message；
  • 如果我们在setup函数中想要使用props，那么不可以通过 this 去获取（后面我会讲到为什么）；
  • 因为props有直接作为参数传递到setup函数中，所以我们可以直接通过参数来使用即可；
• 另外一个参数是context，我们也称之为是一个SetupContext，它里面包含三个属性：
  • attrs：所有的非prop的attribute；
  • slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）；
  • emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过 this.$emit发出事件）；

setup函数的返回值

• setup既然是一个函数，那么它也可以有返回值，它的返回值用来做什么呢？
  • setup的返回值可以在模板template中被使用；
  • 也就是说我们可以通过setup的返回值来替代data选项；
• 甚至是我们可以返回一个执行函数来代替在methods中定义的方法：

• 但是，如果我们将 counter 在 increment 或者 decrement进行操作时，是否可以实现界面的响应式呢？
  • 答案是不可以；
  • 这是因为对于一个定义的变量来说，默认情况下，Vue并不会跟踪它的变化，来引起界面的响应式操作；

setup不可以使用this

• 首先为什么不能使用this，因为再源码中setup函数再执行的时候，更本就没有进行函数的绑定

• 官方关于this有这样一段描述（这段描述是我给官方提交了PR之后的一段描述）：

  • 表达的含义是this并没有指向当前组件实例；

  • 并且在setup被调用之前，data、computed、methods等都没有被解析；

  • 所以无法在setup中获取this；

    

• 其实在之前的这段描述是和源码有出入的（我向官方提交了PR，做出了描述的修改）：

  • 之前的描述大概含义是不可以使用this是因为组件实例还没有被创建出来；
  • 后来我的PR也有被合并到官方文档中；

之前关于this的描述问题

是如何发现官方文档的错误的呢？

• 在阅读源码的过程中，代码是按照如下顺序执行的：
  • 调用 createComponentInstance 创建组件实 例；
  • 调用 setupComponent 初始化component内 部的操作；
  • 调用 setupStatefulComponent 初始化有状态 的组件；
  • 在 setupStatefulComponent 取出了 setup 函 数；
  • 通过callWithErrorHandling 的函数执行 setup；
• 从上面的代码我们可以看出， 组件的instance肯 定是在执行 setup 函数之前就创建出来的。 我是如何发现官方文档的错误的呢？

响应式

Reactive API

• 如果想为在setup中定义的数据提供响应式的特性，那么我们可以使用reactive的函数：

• 那么这是什么原因呢？为什么就可以变成响应式的呢？
  • 这是因为当我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖收集；
  • 当数据发生改变时，所有收集到的依赖都是进行对应的响应式操作（比如更新界面）；
  • 事实上，我们编写的data选项，也是在内部交给了reactive函数将其编程响应式对象的；

ref API

• reactive API对传入的类型是有限制的，它要求我们必须传入的是一个对象或者数组类型：

  • 如果我们传入一个基本数据类型（String、Number、Boolean）会报一个警告；

    

• 这个时候Vue3给我们提供了另外一个API：

  • ref 会返回一个可变的响应式对象，该对象作为一个 响应式的引用维护着它内部的值，这就是ref名称的来源；

  • 它内部的值是在ref的 value 属性中被维护的；

    

• 这里有两个注意事项：

  • 在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过 ref.value 的方式 来使用；
  • 但是在 setup 函数内部，它依然是一个 ref 引用， 所以对其进行操作时，我们依然需要使用 ref.value的方式；

Ref自动解包

• 模板中的解包是浅层的解包，如果我们的代码是下面的方式：
• 如果我们将ref放到一个reactive的属性当中，那么在模板中使用时，它会自动解包：

认识readonly

• 我们通过reactive或者ref可以获取到一个响应式的对象，但是某些情况下，我们传入给其他地方（组件）的这个 响应式对象希望在另外一个地方（组件）被使用，但是不能被修改，这个时候如何防止这种情况的出现呢？
  • Vue3为我们提供了readonly的方法；
  • readonly会返回原生对象的只读代理（也就是它依然是一个Proxy，这是一个Proxy的set方法被劫持，并且不 能对其进行修改）；
• 在开发中常见的readonly方法会传入三个类型的参数：
  • 类型一：普通对象；
  • 类型二：reactive返回的对象；
  • 类型三：ref的对象；

readonly的使用

• 在readonly的使用过程中，有如下规则：
  • readonly返回的对象都是不允许修改的；
  • 但是经过readonly处理的原来的对象是允许被修改的；
    • 比如 const info = readonly(obj)，info对象是不允许被修改的；
    • 当obj被修改时，readonly返回的info对象也会被修改；
    • 但是我们不能去修改readonly返回的对象info；
• 其实本质上就是readonly返回的对象的setter方法被劫持了而已；

readonly的应用

• 那么这个readonly有什么用呢？
• 在我们传递给其他组件数据时，往往希望其他组件使用我们传递的内容，但是不允许它们修改时，就可以使用 readonly了；

Reactive判断的API

• isProxy
  • 检查对象是否是由 reactive 或 readonly创建的proxy。
• isReactive
  • 检查对象是否是由 reactive创建的响应式代理：
  • 如果该代理是 readonly 建的，但包裹了由 reactive 创建的另一个代理，它也会返回 true；
• isReadonly
  • 检查对象是否是由 readonly 创建的只读代理。
• toRaw
  • 返回 reactive 或 readonly 代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用）
• shallowReactive
  • 创建一个响应式代理，它跟踪其自身
  • roperty 的响应性，但不执行嵌套对象的深层响应式转换 (深层还是原生对象)。
• shallowReadonly
  • 创建一个proxy，使其自身的property 为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的）。

toRef

• 如果我们使用ES6的解构语法，对reactive返回的对象进行解构获取值，那么之后无论是修改结构后的变量，还是修改reactive 返回的state对象，数据都不再是响应式的：

  

• 那么有没有办法让我们解构出来的属性是响应式的呢？

  • Vue为我们提供了一个toRefs的函数，可以将reactive返回的对象中的属性都转成ref；

  • 那么我们再次进行结构出来的 name 和 age 本身都是 ref的；

    

• 这种做法相当于已经在state.name和ref.value之间建立了 链接，任何一个修改都会引起另外一个变化

toRefs

• 如果我们只希望转换一个reactive对象中的属性为ref, 那么可以使用toRef的方法：

  

ref其他的API

• unref
  • 如果我们想要获取一个ref引用中的value，那么也可以通过unref方法：
    • 如果参数是一个 ref，则返回内部值，否则返回参数本身；
    • 这是 val = isRef(val) ? val.value : val 的语法糖函数；
• isRef
  • 判断值是否是一个ref对象。
• shallowRef
  • 创建一个浅层的ref对象；
• triggerRef
  • 手动触发和 shallowRef 相关联的副作用： ref其他的API

customRef

• 创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制：
  • 它需要一个工厂函数，该函数接受 track 和 trigger 函数作为参数；
  • 并且应该返回一个带有 get 和 set 的对象；
• 这里我们使用一个的案例：
  • 对双向绑定的属性进行debounce(节流)的操作；

customRef的案例

computed

• 在前面我们讲解过计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理

  • 在前面的Options API中，我们是使用computed选项来完成的；
  • 在Composition API中，我们可以在 setup 函数中使用 computed 方法来编写一个计算属性；

• 如何使用computed呢？

  • 方式一：接收一个getter函数，并为 getter 函数返回的值，返回一个不变的 ref 对象；

  • 方式二：接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象；

    
    

侦听数据的变化

• 在前面的Options API中，我们可以通过watch选项来侦听data或者props的数据变化，当数据变化时执行某一些 操作。
• 在Composition API中，我们可以使用watchEffect和watch来完成响应式数据的侦听；
  • watchEffect用于自动收集响应式数据的依赖；
  • watch需要手动指定侦听的数据源；

watchEffect

• 当侦听到某些响应式数据变化时，我们希望执行某些操作，这个时候可以使用 watchEffect。

• 我们来看一个案例：

  • 首先，watchEffect传入的函数会被立即执行一次，并且在执行的过程中会收集依赖；

  • 其次，只有收集的依赖发生变化时，watchEffect传入的函数才会再次执行；

    

watchEffect的停止侦听

• 如果在发生某些情况下，我们希望停止侦听，这个时候我们可以获取watchEffect的返回值函数，调用该函数即可。
• 比如在上面的案例中，我们age达到20的时候就停止侦听：

watchEffect清除副作用

• 什么是清除副作用呢？

  • 比如在开发中我们需要在侦听函数中执行网络请求，但是在网络请求还没有达到的时候，我们停止了侦听器， 或者侦听器侦听函数被再次执行了。
  • 那么上一次的网络请求应该被取消掉，这个时候我们就可以清除上一次的副作用；

• 在我们给watchEffect传入的函数被回调时，其实可以获取到一个参数：onInvalidate

  • 当副作用即将重新执行 或者 侦听器被停止 时会执行该函数传入的回调函数；

  • 我们可以在传入的回调函数中，执行一些清除工作；

    

setup中使用ref

• 在讲解 watchEffect执行时机之前，我们先补充一个知识：在setup中如何使用ref或者元素或者组件？

• 其实非常简单，我们只需要定义一个ref对象，绑定到元素或者组件的ref属性上即可；

  

watchEffect的执行时机

• 默认情况下，组件的更新会在副作用函数执行之前：

  • 如果我们希望在副作用函数中获取到元素，是否可行呢？

    

• 我们会发现打印结果打印了两次：

  • 这是因为setup函数在执行时就会立即执行传入的副作用函数，这个时候DOM并没有挂载，所以打印为null；
  • 而当DOM挂载时，会给title的ref对象赋值新的值，副作用函数会再次执行，打印出来对应的元素；

调整watchEffect的执行时机

• 如果我们希望在第一次的时候就打印出来对应的元素呢？

  • 这个时候我们需要改变副作用函数的执行时机；
  • 它的默认值是pre，它会在元素 挂载 或者 更新 之前执行；
  • 所以我们会先打印出来一个空的，当依赖的title发生改变时，就会再次执行一次，打印出元素；

• 我们可以设置副作用函数的执行时机：

  

• flush 选项还接受 sync，这将强制效果始终同步触发。然而，这是低效的，应该很少需要。

Watch的使用

• watch的API完全等同于组件watch选项的Property：
  • watch需要侦听特定的数据源，并在回调函数中执行副作用；
  • 默认情况下它是惰性的，只有当被侦听的源发 生变化时才会执行回调；
• 与watchEffect的比较，watch允许我们：
  • 懒执行副作用（第一次不会直接执行）；
  • 更具体的说明当哪些状态发生变化时，触发侦听器的执行；
  • 访问侦听状态变化前后的值；

侦听单个数据源

• watch侦听函数的数据源有两种类型：

  • 一个getter函数：但是该getter函数必须引用可响应式的对象（比如reactive或者ref）；

  • 直接写入一个可响应式的对象，reactive或者ref（比较常用的是ref）；

  

侦听多个数据源

• 侦听器还可以使用数组同时侦听多个源：

  

侦听响应式对象

• 如果我们希望侦听一个数组或者对象，那么可以使用一个getter函数，并且对可响应对象进行解构：

  

watch的选项

• 如果我们希望侦听一个深层的侦听，那么依然需要设置 deep 为true：

  • 也可以传入 immediate 立即执行；

    

生命周期钩子

• 我们前面说过 setup 可以用来替代 data 、 methods 、 computed 、watch 等等这些选项，也可以替代 生命周 期钩子。

• 那么setup中如何使用生命周期函数呢？

  • 可以使用直接导入的 onX 函数注册生命周期钩子；

  • beforeCreate和create在setup中没有相对应的onX的函数

    • 如果想要在beforeCreate和create中进行操作
    • 可以把代码直接写入到setup中
    • setup的执行时序比beforeCreate和create还要早

    
    
    

Provide函数

• 事实上我们之前还学习过Provide和Inject，Composition API也可以替代之前的

• rovide 和 Inject 的选项。

  • 我们可以通过 provide来提供数据：

  • 可以通过 provide 方法来定义每个 Property；

  • provide可以传入两个参数：

    • name：提供的属性名称；

    • value：提供的属性值；

      

Inject函数

• 在 后代组件 中可以通过 inject 来注入需要的属性和对应的值：

  • 可以通过 inject 来注入需要的内容；

  • inject可以传入两个参数：

    • 要 inject 的 property 的 name

    • 默认值；

      

数据的响应式

• 为了增加provide 值和 inject 值之间的响应性，我们可以在provide 值时使用 ref 和 reactive。

  

修改响应式Property

• 如果我们需要修改可响应的数据，那么最好是在数据提供的位置来修改：

  • 我们可以将修改方法进行共享，在后代组件中进行调用；

    

useCounter

• 我们先来对之前的counter逻辑进行抽取：

  

useTitle

• 我们编写一个修改title的Hook：

  

useScrollPosition

• 我们来完成一个监听界面滚动位置的Hook：

  

useMousePosition

• 我们来完成一个监听鼠标位置的Hook：

  

useLocalStorage

• 我们来完成一个使用 localStorage 存储和获取数据的Hook：

  

h函数

认识h函数

• Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的 能力，这个时候你可以使用 渲染函数 ，它比模板更接近编译器；
  • 前面我们讲解过VNode和VDOM的改变：
  • Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚 拟DOM（VDOM）；
  • 事实上，我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode；
  • 那么，如果你想充分的利用JavaScript的编程能力，我们可以自己来编写 createVNode 函数，生成对应的 VNode；
• 那么我们应该怎么来做呢？使用 h()函数：
  • h() 函数是一个用于创建 vnode 的一个函数；
  • 其实更准备的命名是 createVNode() 函数，但是为了简便在Vue将之简化为 h() 函数； 认识h函数

h()函数 如何使用呢？

• h()函数 如何使用呢？它接受三个参数：

  

• 注意事项：

  • 如果没有props，那么通常可以将children作为第二个参数传入；
  • 如果会产生歧义，可以将null作为第二个参数传入，将children作为第三个参数传入；

h函数的基本使用

• h函数可以在两个地方使用：

  • render函数选项中；

  • setup函数选项中（setup本身需要是一个函数类型，函数再返回h函数创建的VNode）；

    
    

h函数计数器案例

函数组件和插槽的使用

jsx

jsx的babel配置

• 如果我们希望在项目中使用jsx，那么我们需要添加对jsx的支持：

  • jsx我们通常会通过Babel来进行转换（React编写的jsx就是通过babel转换的）；
  • 对于Vue来说，我们只需要在Babel中配置对应的插件即可；

• 安装Babel支持Vue的jsx插件：

  npm install @vue/babel-plugin-jsx -D 
  

• 在babel.config.js配置文件中配置插件：

  

jsx计数器案例

jsx组件的使用

自定义指令

认识自定义指令

• 在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue 也允许我们来自定义自己的指令。
  • 注意：在Vue中，代码的复用和抽象主要还是通过组件；
  • 通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；
• 自定义指令分为两种：
  • 自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；
  • 自定义全局指令：app的 directive 方法，可以在任意组件中被使用；
• 比如我们来做一个非常简单的案例：当某个元素挂载完成后可以自定获取焦点
  • 实现方式一：如果我们使用默认的实现方式；
  • 实现方式二：自定义一个 v-focus 的局部指令；
  • 实现方式三：自定义一个 v-focus 的全局指令；

实现方式一：聚焦的默认实现

实现方式二：局部自定义指令

• 实现方式二：自定义一个 v-focus 的局部指令

  • 这个自定义指令实现非常简单，我们只需要在组件选项中使用 directives 即可；

  • 它是一个对象，在对象中编写我们自定义指令的名称（注意：这里不需要加v-）；

  • 自定义指令有一个生命周期，是在组件挂载后调用的 mounted，我们可以在其中完成操作；

    

方式三：自定义全局指令

• 自定义一个全局的v-focus指令可以让我们在任何地方直接使用

  

指令的生命周期

• 一个指令定义的对象，Vue提供了如下的几个钩子函数：
• created：在绑定元素的 attribute 或事件监听器被应用之前调用；
• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
• mounted：在绑定元素的父组件被挂载后调用；
• beforeUpdate：在更新包含组件的 VNode 之前调用；
• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
• beforeUnmount：在卸载绑定元素的父组件之前调用；
• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

指令的参数和修饰符

• 如果我们指令需要接受一些参数或者修饰符应该如何操作呢？

  • info是参数的名称；
  • aaa-bbb是修饰符的名称；
  • 后面是传入的具体的值；

• 在我们的生命周期中，我们可以通过 bindings 获取到对应的内容：

  

自定义指令练习

• 自定义指令案例：时间戳的显示需求：

  • 在开发中，大多数情况下从服务器获取到的都是时间戳；
  • 我们需要将时间戳转换成具体格式化的时间来展示；
  • 在Vue2中我们可以通过过滤器来完成；
  • 在Vue3中我们可以通过 计算属性（computed） 或者 自定义一个方法（methods） 来完成；
  • 其实我们还可以通过一个自定义的指令来完成；

• 我们来实现一个可以自动对时间格式化的指令v-format-time：

  • 这里我封装了一个函数，在首页中我们只需要调用这个函数并且传入app即可；

• 时间格式化指令

  

Teleport

认识Teleport

• 在组件化开发中，我们封装一个组件A，在另外一个组件B中使用：

  • 那么组件A中template的元素，会被挂载到组件B中template的某个位置；
  • 最终我们的应用程序会形成一颗DOM树结构；

• 但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置：

  • 比如移动到body元素上，或者我们有其他的div#app之外的元素上；
  • 这个时候我们就可以通过teleport来完成；

• Teleport是什么呢？

  • 它是一个Vue提供的内置组件，类似于react的Portals；
  • teleport翻译过来是心灵传输、远距离运输的意思；
    • 它有两个属性：
      • to：指定将其中的内容移动到的目标元素，可以使用选择器；
      • disabled：是否禁用 teleport 的功能；

  

  

和组件结合使用

• 当然，teleport也可以和组件结合一起来使用：

  • 我们可以在 teleport 中使用组件，并且也可以给他传入一些数据；

    

多个teleport

• 如果我们将多个teleport应用到同一个目标上（to的值相同），那么这些目标会进行合并：

  

  

认识Vue插件

• 通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式：
  • 对象类型：一个对象，但是必须包含一个 install 的函数，该函数会在安装插件时执行；
  • 函数类型：一个function，这个函数会在安装插件时自动执行；
• 插件可以完成的功能没有限制，比如下面的几种都是可以的：
  • 添加全局方法或者property，通过把它们添加到 config.globalProperties 上实现；
  • 添加全局资源：指令/过滤器/过渡等；
  • 通过全局 mixin 来添加一些组件选项；
  • 一个库，提供自己的 API，同时提供上面提到的一个或多个功能；

插件的编写方式

• 对象类型的写法

  

• 函数类型的写法