1.mixin和extends

认识Mixin

目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。

在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：
Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；
一个Mixin对象可以包含任何组件选项；
当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选项中；

Mixin的基本使用

Mixin的合并规则

如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么Vue会如何操作呢？
这里分成不同的情况来进行处理；

情况一：如果是data函数的返回值对象
返回值对象默认情况下会进行合并；
如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；

情况二：如果是生命周期钩子函数
生命周期的钩子函数会被合并到数组中，都会被调用；

情况三：值为对象的选项，例如methods、components 和directives，将被合并为同一个对象。
比如都有methods选项，并且都定义了方法，那么它们都会生效；
但是如果对象的key相同，那么会取组件对象的键值对；

全局混入Mixin

如果组件中的某些选项，是所有的组件都需要拥有的，那么这个时候我们可以使用全局的mixin：
全局的Mixin可以使用应用app的方法mixin 来完成注册；
一旦注册，那么全局混入的选项将会影响每一个组件；

extends

另外一个类似于Mixin的方式是通过extends属性：
允许声明扩展另外一个组件，类似于Mixins；

在开发中extends用的非常少，在Vue2中比较推荐大家使用Mixin，而在Vue3中推荐使用Composition API。

2.compositionAPI基础

Options API的弊端

在Vue2中，我们编写组件的方式是Options API：
Options API的一大特点就是在对应的属性中编写对应的功能模块；
比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子；

但是这种代码有一个很大的弊端：
当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；
当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；
尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）；

下面我们来看一个非常大的组件，其中的逻辑功能按照颜色进行了划分：
这种碎片化的代码使理解和维护这个复杂的组件变得异常困难，并且隐藏了潜在的逻辑问题；
并且当我们处理单个逻辑关注点时，需要不断的跳到相应的代码块中；

如果我们能将同一个逻辑关注点相关的代码收集在一起会更好。

这就是Composition API想要做的事情，以及可以帮助我们完成的事情。

也有人把Vue CompositionAPI简称为VCA。

认识Composition API

那么既然知道Composition API想要帮助我们做什么事情，接下来看一下到底是怎么做呢？
为了开始使用Composition API，我们需要有一个可以实际使用它 （编写代码）的地方；
在Vue组件中，这个位置就是setup 函数；

setup其实就是组件的另外一个选项：
只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项；
比如methods、computed、watch、data、生命周期等等；

接下来我们一起学习这个函数的使用：
函数的参数
函数的返回值

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有这样一段描述（这段描述是我给官方提交了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 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处理的原来的对象是允许被修改的；
1.比如const info = readonly(obj)，info对象是不允许被修改的；
2.当obj被修改时，readonly返回的info对象也会被修改；
3.但是我们不能去修改readonly返回的对象info；

其实本质上就是readonly返回的对象的setter方法被劫持了而已；

readonly的应用

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

Reactive判断的API

isProxy
检查对象是否是由reactive 或readonly创建的proxy。

isReactive
检查对象是否是由reactive创建的响应式代理：
如果该代理是readonly 建的，但包裹了由reactive 创建的另一个代理，它也会返回true；

isReadonly
检查对象是否是由readonly 创建的只读代理。

toRaw
返回reactive 或readonly 代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用）。

shallowReactive
创建一个响应式代理，它跟踪其自身property 的响应性，但不执行嵌套对象的深层响应式转换(深层还是原生对象)。

shallowReadonly
创建一个proxy，使其自身的property 为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的）。

3.RefAPI的补充

toRefs

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

那么有没有办法让我们解构出来的属性是响应式的呢？
Vue为我们提供了一个toRefs的函数，可以将reactive返回的对象中的属性都转成ref；
那么我们再次进行解构出来的name 和age 本身都是ref的；

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

toRef

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

ref其他的API

unref

如果我们想要获取一个ref引用中的value，那么也可以通过unref方法：
如果参数是一个ref，则返回内部值，否则返回参数本身；
这是val = isRef(val) ? val.value : val 的语法糖函数；

isRef
判断值是否是一个ref对象。

shallowRef
创建一个浅层的ref对象；

triggerRef
手动触发和shallowRef 相关联的副作用：

customRef

创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制：
它需要一个工厂函数，该函数接受track 和trigger 函数作为参数；
并且应该返回一个带有get 和set 的对象；

这里我们使用一个的案例：
对双向绑定的属性进行debounce(节流) 的操作；

4.computed和watch

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 立即执行；

5.生命周期钩子

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

那么setup中如何使用生命周期函数呢？
可以使用直接导入的onX 函数注册生命周期钩子；

6.Provide和Inject

Provide函数

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

我们可以通过provide来提供数据：
可以通过provide 方法来定义每个Property；
provide可以传入两个参数：
name：提供的属性名称；
value：提供的属性值；

Inject函数

在后代组件中可以通过inject 来注入需要的属性和对应的值：
可以通过inject 来注入需要的内容；
inject可以传入两个参数：

要inject 的property 的name；
默认值；

数据的响应式

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

修改响应式Property

如果我们需要修改可响应的数据，那么最好是在数据提供的位置来修改：
我们可以将修改方法进行共享，在后代组件中进行调用；

7.compositionAPI练习

useCounter

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

useTitle

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

useScrollPosition

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

useMousePosition

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

useLocalStorage

8.setup顶层编写方式

单文件组件<script setup>

<script setup> 是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势：
1.更少的样板内容，更简洁的代码。
2.能够使用纯 Typescript 声明 props 和抛出事件。
3.更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
4.更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。

• 基本语法 要使用这个语法，需要将 setup attribute 添加到 <script> 代码块上：

<script setup>
console.log('hello script setup')
</script>

里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

• 顶层的绑定会被暴露给模板 当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用：

<script setup>
// 变量
const msg = 'Hello!'

// 函数
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

import 导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的 helper 函数，并不需要通过 methods 选项来暴露它：

<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>

9.render函数的使用

认识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()函数如何使用呢？它接受三个参数：

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

h函数的基本使用

h函数可以在两个地方使用：
render函数选项中；
setup函数选项中（setup本身需要是一个函数类型，函数再返回h函数创建的VNode）；

h函数计数器案例

函数组件和插槽的使用

10.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组件的使用

11.自定义指令

认识自定义指令

在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即可；

12.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，同时提供上面提到的一个或多个功能；

• 插件的编写方式 对象类型的写法

函数类型的写法