一、前言

（一）Option API 与 Composition API

  • 在Vue2中，我们编写组件的方式是Options API：
    • Options API的一大特点就是在对应的属性中编写对应的功能模块；
    • 比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子；
弊端：
  • 当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；
  • 当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；
  • 尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）；
Vue2 Option API
Vue2 Option API
 
Vue3 Composition API
Vue3 Composition API

二、Mixin

（一）基本使用

如果组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。在Vue2和Vue3中都支持的一种方式是使用Mixin来完成（Mixin本质是「对象」）
Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能，一个Mixin对象可以包含任何组件选项。当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选项中。
 

（二）合并规则

  • 情况1️⃣：如果是data函数的返回值对象
    • 返回值对象默认情况下会进行合并；
    • 如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；
  • 情况2️⃣：如果是生命周期钩子函数
    • 生命周期的钩子函数会被合并到数组中，都会被调用；
  • 情况3️⃣：值为对象的选项，例如methods、components 和directives，将被合并为同一个对象。
    • 比如都有methods选项，并且都定义了方法，那么它们都会生效；
    • 但是如果对象的key相同，那么会取组件对象的键值对；
 

（三）全局混入

即全部组件都包含mixin的属性
 

三、Extends

作为补充，但是完全可以使用Mixin替代。只继承BasePage中的 export对象。
 

四、setup()

（一）基本使用

为了开始使用Composition API，我们可以通过 setup 函数使用Composition API，但需要注意setup函数 没有绑定this。
 
  • 我们先来研究一个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() 的返回值可以在模板template中被使用；
  • 也就是说我们可以通过 setup() 的返回值来 替代data 选项；（ setup() 优先级比 data 高）
 
⭐ setup() 不可以使用 this
  • this 并没有指向当前组件实例（表明已经实例化了）；
  • 在 setup() 被调用之前，data、computed、methods 等都没有被解析；
  • 所以无法在 setup() 中获取 this；
 

五、reactive API

响应式通过Porxy对象数据劫持
 
Reactive API 判断（偏向底层API）
  • isProxy
      • 检查对象是否是由 reactive 或 readonly 创建的proxy。(此处也表明reactive和readonly的底层原理)
  • isReactive
      • 检查对象是否是由 reactive 创建的响应式代理：
      如果该代理是 readonly 建的，但包裹了由 reactive 创建的另一个代理，它也会返回true；
      ⭐例如 const info = readonly(reactive({name: "alan"})) // true
  • isReadonly
      • 检查对象是否是由 readonly 创建的只读代理。
  • toRaw
      • 返回reactive 或readonly 代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用）。
      例如：const info = reactive({name: "why"}); info.toRAW // 返回{name: "why"}原始对象
  • shallowReactive
      • 创建一个响应式代理，它跟踪其自身property 的响应性，但不执行嵌套对象的深层响应式转换(深层还是原生对象)。
  • shallowReadonly
      • 创建一个proxy，使其自身的property 为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的）。
💡
全部都通过 import { toRaw } from 'vue'; 导入；shallowXxx 将默认的深层操作转化为浅层
 

六、ref API

reactive API对 传入的类型是有限制的，它要求我们必须传入的是 一个对象 或者 数组类型；如果我们传入一个基本数据类型（String、Number、Boolean）会报一个警告；
在模板中引入 ref 的值时，Vue会自动帮助我们进行 解包操作，所以我们并不需要在模板中通过ref.value 的方式来使用；
但是在 setup 函数内部，它依然是一个 ref 引用， 所以对其进行操作时，我们依然需要使用ref.value 的方式；【注意上述 ref 都是浅解包，如果外层加入对象则不会解包；但如果使用Reactive API，即最外层包裹的是一个 reactive 可响应式对象，则 可以自动解包（内部对Reactive进行判断）】
 
Ref API
  • unref 如果我们想要 获取一个ref引用中的value，那么也可以通过unref方法： 如果参数是一个ref，则返回内部值，否则返回参数本身； 这是 val = isRef(val) ? val.value : val 的语法糖函数；
  • isRef 判断值 是否是一个ref对象。
  • shallowRef 创建一个 浅层的ref对象；
  • triggerRef 手动触发和shallowRef 相关联的副作用：
第三、四点案例
 

七、readonly API

通过 reactive或者ref 可以获取到一个响应式的对象，但是某些情况下，我们 传入给其他地方（组件）的这个响应式对象希望在 另外一个地方（组件）被使用，但是 不能被修改，这个时候Vue3为我们提供了 readonly 的方法；
readonly 会返回原生对象的 只读代理（也就是它依然是一个Proxy，并且对proxy的set方法进行劫持，并且不能对其进行修改）；
⭐ 通常传入子组件时需要传入响应式的对象，通常使用第二种方法
 

八、toRefs / toRef API

如果我们使用ES6的 解构 语法，对 reactive 返回的对象进行解构 获取值，那么之后无论是 修改结构后的变量，还是修改 reactive 返回的state对象，数据都不再是响应式的。实现响应式可以通过 toRefs 或者 toRef
⭐ 传入的参数是 reactive 对象
 

九、customRef API

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

十、computed API

计算属性computed：当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理；
在前面的Options API中，我们是使用 computed 选项来完成的（Vue2）；
在Composition API中，我们可以在 setup 函数中使用 computed 方法来编写一个计算属性，其返回一个 ref 对象；
 

十一、watch API

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

（一）watchEffect API

基本使用

（二）停止监听

（三）清除副作用

比如在开发中我们需要在侦听函数中执行网络请求，但是在网络请求还没有达到的时候，我们停止了侦听器，或者侦听器侦听函数被再次执行了。
那么上一次的网络请求应该被取消掉，这个时候我们就可以清除上一次的副作用；
解决方法：在我们给 watchEffect 传入的函数被回调时，其实可以获取到一个参数：onInvalidate 当 副作用即将重新执行 或者 侦听器被停止 时会执行该函数传入的回调函数；我们可以在传入的回调函数中，执行一些清除工作；

（四）setup中使用ref

在Vue2中我们可以使用 ref 作为属性绑定在标签上，然后在 method 等地方通过 this.$ref.xxx 进行访问该元素，但是在 setup 中 this 并没有指向，所以通过其他方法实现。

（五）watchEffect 执行时机

上述代码会打印两次值
如果我们希望在第一次的时候就打印出来对应的元素呢？
这个时候我们需要改变副作用函数的执行时机，增加第二个参数 flush： 它的默认值是 pre，它会在元素挂载或者更新之前执行；所以我们会先打印出来一个空的，当依赖的title发生改变时，就会再次执行一次，打印出元素；我们可以设置为 post。flush 选项还接受 sync，这将强制效果始终同步触发。然而，这是低效的，应该很少需要。

（六）watch API

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

监听单个数据源

watch侦听函数的数据源有两种类型：1️⃣一个 getter 函数：但是该 getter 函数必须引用可响应式的对象（比如 reactive 或者 ref）；2️⃣直接写入一个可响应式的对象，reactive 或者 ref（比较常用的是 ref）；
💡
相关源码补充：package/runtime-core/apiWatch.ts
传入的source会经过 isRef()、isReactive()、isArray()、isFunction() 判断

监听多个数据源

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

（七）侦听响应式对象

 

十二、生命周期 API

生命周期函数
生命周期函数
如果有需要在挂载之前进行执行的操作可以直接放在 setup 里面，即 setup 围绕 beforeCreate 和 created 生命周期钩子运行的
 

十三、Provide × Inject

上述案例子组件修改父组件的数据是不合规的，可以传入 provide 时候用 readonly 进行修饰
 

十四、composition API 案例

（一）封装到index

把Hook进行包装

（二）简单的逻辑抽离

将部分逻辑抽取到外部 hook 中，简化主体App的逻辑

（三）修改标题案例

（四）监听界面滚动和鼠标位置

（五）本地储存

 

十五、顶层编写方式

需要注意组件传值需要用到 defineProps，具体代码如下：
更多适用情况见官网
<script setup> | Vue.js
Vue.js - 渐进式的 JavaScript 框架
<script setup> | Vue.js
https://cn.vuejs.org/api/sfc-script-setup.html#script-setup
<script setup> | Vue.js
 
 
notion image

十六、h函数

Vue 推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候我们可以使用 渲染函数，它比模板更接近编译器；
💡
template中代码转化为真实DOM流程
notion image
其接受三个参数：1️⃣tag，必须传值，一个HTML标签名、组件、一句组件，E.g. “div”；2️⃣props，与attribute、prop和事件相对应的对象，我们会在模板中使用；3️⃣children，子VNodes，使用`h()`构建或使用字符串获取“文本VNode”或有插槽的对象，例子如下：
💡 如果没有props，那么通常可以将children作为第二个参数传入；✅如果会产生歧义，可以将null作为第二个参数传入，将children作为第三个参数传入；
 
1️⃣ 基本使用
2️⃣ 利用h函数实现加减点击操作
3️⃣ 传入组件并使用插槽
 

十七、jsx

如果我们希望在项目中使用jsx，那么我们需要添加对jsx的支持：jsx我们通常会通过Babel来进行转换（React编写的jsx就是通过babel转换的）；对于Vue来说，我们只需要在Babel中配置对应的插件即可（目前脚手架已支持可以不用额外配置）
💡其本质是通过Babel转成h函数
插件安装：npm install @vue/babel-plugin-jsx -D
 
引用其他组件案例
 

十八、自定义指令

基础

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

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

通过原生的方式搭配生命周期回调函数实现
 

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

 

实现方式三：自定义全局指令

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

指令的生命周期

一个指令定义的对象，Vue3 提供了如下的几个钩子函数：
 
案例代码：

Demo-时间戳转化展示

在开发中，大多数情况下从服务器获取到的都是时间戳。我们需要将时间戳转换成具体格式化的时间来展示；

十九、Teleport与插件

Teleport基础

之前：组件化开发 中，我们封装一个组件A，在另外一个组件B中使用：那么组件A中template的元素，会被挂载到组件B中template的某个位置；最终我们的应用程序会形成 一棵DOM树结构；
新情况：但是某些情况下，我们希望组件不是挂载在这个组件树上的，可能是移动到Vue app之外的其他位置：比如移动到body元素上，或者我们有其他的div#app之外的元素上。个时候我们就可以通过 teleport 来完成；
Teleport是一个Vue提供的内置组件，类似于react的Portals。teleport翻译过来是心灵传输、远距离运输的意思；它有 两个 属性： 1️⃣ to：指定将其中的内容移动到的目标元素，可以使用选择器； 2️⃣ disabled：是否禁用 teleport 的功能；
 
案例代码
 

Vue插件

通常我们向Vue全局添加一些功能时，会采用插件的模式，它有两种编写方式： 1️⃣ 对象类型：一个对象，但是必须包含一个 install 的函数，该函数会在安装插件时执行； 2️⃣ 函数类型：一个function，这个函数会在安装插件时自动执行；
 
类型1️⃣：plugins_objects
在组件setup中使用:
 
类型2️⃣：plugins_function
代码自动执行
 
 
notion image
 
Animation浏览器原理 × V8引擎
Loading...
😈Zabanya
😈Zabanya
一名喜欢瞎折腾选手
公告
 
部分教程类文章篇幅过大，可能会导致加载时间稍微偏长，非常感谢您的耐心等待 ~ 🎉