文章目录

Vue3-Composition-API(一)
- 前置补充
- - 认识Mixin
  - Mixin的基本使用
  - Mixin的合并规则
  - 全局混入Mixin
  - extends
- Options API的弊端
- 认识Composition API
- - setup函数的参数
  - setup函数的返回值
  - setup不可以使用this
  - Reactive API
  - Ref API(尤大大推荐使用)
  - - Ref自动解包
  - 认识readonly
  - - readonly的使用
    - readonly的应用

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来完成：

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。

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函数的参数，它主要有两个参数：

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

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

对于定义props的类型，我们还是和之前的规则是一样的，在props选项中定义； p
并且在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有这样一段描述

表达的含义是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了

Vue3学习之旅--Composition-API-入门篇相关推荐

Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 ...
js 表单设计器_准备迎接Vue3，使用Vue Composition API生成干净可扩展的表单
表单是前端开发中最棘手的部分之一,您可能会在其中发现很多混乱的代码. Vue.js 2之类的基于组件的框架在提高前端代码的可伸缩性方面做了很多工作,但是形式问题仍然存在. 在本教程中,我将向您展示新的 ...
vue3学习之旅--邂逅vue3-了解认识Vue3(二)
续上文: vue3学习之旅–邂逅vue3-了解认识Vue3 计数器案例(体验Vue) <div id="app"></div><script src= ...
淘宝 TOP 平台Open API入门篇
淘宝 TOP 平台Open API入门篇 [未经本人许可严禁转载] 前不久刚写了一篇关于淘宝Open API的入门教程,具体见http://blog.csdn.net/hereweare2009/a ...
SpringBoot学习之旅(七)---JPA进阶篇之自定义查询、修改、分页
文章目录前言源码下载其他文章查询关键字自定义Select和Update 分页及自定义分页自定义分页分页查询的业务代码前言前一节SpringBoot学习之旅(六)-JPA操作MySql ...
安卓学习笔记（一）入门篇
总结<第一行代码>Android学习笔记(一)入门篇 1.入门 Android的四层架构和四大组件运行第一个Android程序日志工具Log AndroidStudio快捷键 GIT的 ...
【数分书单】业务学习《从零开始做运营入门篇》第一/二/三章小结
<从零开始做运营入门篇>by 张亮第一章关于运营的一些实话实说 1 苦逼的运营产品两兄弟运营需要积累,实力的积累,经验的积累,对用户了解程度的积累,对数据敏感程度的积累:长期磨练出 ...
我的英文写作学习之旅:100日入门+后期靠积累
[简介] 常用网名: 猪头三出生日期: 1981.XX.XX 个人网站: https://www.x86asm.org QQ交流: 643439947 编程生涯: 2001年~至今[共17年] 职业 ...
【技术杂谈】RPC和RESTful API入门篇
前言这两天在和同学谈到RPC.RESTful时候发现自己对这两者并不是很理解,于是查阅了网上相关资料加上自己的理解写下本篇文章以加深印象,由于本人水平有限,若对这两者的理解有不妥之处望指出. 什么是 ...
【入门建议收藏】密码学学习笔记之线性分析入门篇——EzSPN
前言上一篇了解了一下差分分析,这次我们结合一道CTF题目聊一聊线性分析同属于选择明文的差分分析不同,线性分析属于已知明文攻击方法,它通过寻找明文和密文之间的一个"有效"的线性逼 ...

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