Vue3学习之旅--Composition-API-入门篇

vue3笔记
vue3学习之旅–邂逅vue3-了解认识Vue3
vue3学习之旅–邂逅vue3-了解认识Vue3(二)
Vue3学习之旅–爱上Vue3–Vue3基础语法(一)–以及vscode基本使用和快速生成代码片段
Vue3学习之旅–爱上Vue3–Vue3的Options-API
vue3学习之旅–vue的表单和开发模式–组件化开发初识
Vue3学习之旅–初识webpack–webpack打包js，css，less等文件以及兼容性处理
Vue3学习之旅–之webpack基础-进阶–webpack5?拿来吧你！
vue3学习之旅–webpack5-babel整合sfc单文件vue组件
Vue3学习之旅-webpack终章–热部署(更新)–跨域代理？拿来吧你！
vue3学习之旅-Vue-CLI及其原理&尤大大新宠Vite-下一代前端开发构建工具Vite:拿来吧你!
Vue3学习之旅-之vue3组件化(一)—＞父子组件通信
Vue3学习之旅–Vue3组件化开发(二)-非父子组件通信及组件插槽–细节太多建议反复观看
Vue3学习之旅-Vue3组件化开发(三)-动态/异步组件-vue3生命周期-组件的v-model
Vue3学习之旅-Vue3过渡&动画实现

Vue3-Composition-API(一)

前置补充

认识Mixin

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

在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：

1. Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；
2. 一个Mixin对象可以包含任何组件选项；
3. 当组件使用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。

Options API的弊端

在Vue2中，我们编写组件的方式是Options API：

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

但是这种代码有一个很大的弊端：

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

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

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

也有人把Vue Composition API简称为VCA。

认识Composition API

那么既然知道Composition API想要帮助我们做什么事情，接下来看一下到底是怎么做呢？

1. 为了开始使用Composition API，我们需要有一个可以实际使用它（编写代码）的地方；
2. 在Vue组件中，这个位置就是 setup 函数；

setup其实就是组件的另外一个选项：

1. 只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项；
2. 比如methods、computed、watch、data、生命周期等等；

接下来我们一起学习这个函数的使用

• 函数的参数
• 函数的返回值

setup函数的参数

我们先来研究一个setup函数的参数，它主要有两个参数：

• 第一个参数：props
• 第二个参数：context

props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup中如果需要使用，那么就可 以直接通过props参数获取：

1. 对于定义props的类型，我们还是和之前的规则是一样的，在props选项中定义； p
2. 并且在template中依然是可以正常去使用props中的属性，比如message；
3. 如果我们在setup函数中想要使用props，那么不可以通过 this 去获取（后面我会讲到为什么）；
4. 因为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有这样一段描述

• 表达的含义是this并没有指向当前组件实例；
• 并且在setup被调用之前，data、computed、methods等都没有被解析；
• 所以无法在setup中获取this；

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处理的原来的对象是允许被修改的；
  • 比如 const info = readonly(obj)，info对象是不允许被修改的；
  • 当obj被修改时，readonly返回的info对象也会被修改；
  • 但是我们不能去修改readonly返回的对象info；
• 其实本质上就是readonly返回的对象的setter方法被劫持了而已；

readonly的应用

那么这个readonly有什么用呢？

在我们传递给其他组件数据时，往往希望其他组件使用我们传递的内容，但是不允许它们修改时，就可以使用 readonly了