文章目录

• • 文档
  • setup
  • • 总结
    • 基本使用
    • setup的参数
  • ref函数
  • • 总结：
    • 例子：
    • 完整代码：
  • reactive函数
  • • 总结：
    • 基本使用
    • 完整代码:
  • computed计算属性
  • • 总结：
    • 例子：
    • 完整代码：
  • watch侦听器
  • • 总结：
    • 基本使用：
    • • 监视ref定义的响应式数据：
      • 监视reactive定义的响应式数据：
      • 监视reactive定义的响应式数据的某些属性：
    • 完整代码：
  • watchEffect监视
  • • 总结：
    • 例子：
    • 完整代码：
  • hook函数
  • • 总结：
    • 例子：
    • 完整代码：
  • toRef和toRefs：
  • • 总结：
    • 例子：
    • 完整代码：
  • 其他组合式API
  • • shallowReactive 与 shallowRef
    • readonly 与 shallowReadonly
    • toRaw 与 markRaw
    • customRef
    • Provide 与 Inject
    • isXxx
  • 新的组件
  • • Fragment
    • Teleport
    • Suspense
  • vue2 -> vu3 的其他变化：
  • • 全局API转移：
    • 其他变化

文档

尚硅谷视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=136
官方文档：https://cn.vuejs.org/guide/introduction.html

本文每小节先总结，之后上案例。

setup

总结

1. 理解: vue3.0中一个新的配置项，值为一个函数。

2. setup是所有composition API(组合API)“表演的舞台”。

3. 组件中所用到的:数据、方法等等，均要配置在setup中。

4. setup函数的两种返回值:

   1. 若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )
   2. 若返回一个渲染函数:则可以自定义渲染内容。(了解)

5. 执行时机：在beforCreate之前执行一次，此时this是undefined

6. 参数：

   1. props:值为对象，组件外部传过来，且组件内部props申明接收了的属性；
   2. context：上下文对象：
      • attrs：值为对象，父组件传递过来，但没在内部props中声明接收的属性；相当于this.$attrs
      • slots:收到的插槽内容；相当于this.$slots
      • emit：分发自定义事件的函数，相当于this.$emit

7. 注意点:

   1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置(data、methos、computed…）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置(data、methos、computed…) 。
      • 如果有重名, setup优先。
   2. setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。

基本使用

基本使用如下图：(以下方式是非响应式的，响应式需借助ref、reactive等函数)

完整代码：

setup的参数

完整代码如下：
父组件App.vue:

子组件School.vue

ref函数

总结：

• 作用： 定义一个响应式的数据

• 语法：const xxx = ref(初始值);

  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）
  • JS中操作数据：xxx.value
  • 模板中读取数据：不需要写.value,直接{{ xxx }}即可

• 备注：

  • 接收的数据可以是：基本类型，也可以时对象类型
  • 基本类型数据：响应式依然靠 Object.defineProperty() 的 get 与 set完成的
  • 对象类型数据：内部“求助”Vue3中的一个新函数 – reactive函数

例子：

如果想要定义一个响应式的值（例如，age），可通过如下方式：

• 基本类型：
  
• 对象：（实际借助了reactive函数）
  

完整代码：

reactive函数

总结：

• 作用：定义一个对象类型的响应式数据（基本数据类型不要用它，要用 ref 函数）
• 语法：const 代理对象 = reactive(源对象) 接收一个对象（或数组），返回一个代理对象（Proxy对象）
• reactive定义的响应式数据是“深层次的”
• 内部基于ES6中的Proxy实现，通过代理对象操作源对象内部数据进行操作

基本使用

完整代码:

computed计算属性

总结：

• 与|vue2中的computed配置功能一致
• 写法：
  

例子：

完整代码：

watch侦听器

总结：

• 与vue2.x中watch配置功能一致
• 两个小坑：
  • 监视reactive定义的响应式数据时，oldVal无法正常获取、强制开启了深度监视（deep配置失效）
  • 监视reactive定义的响应式数据中的某个属性时，deep配置有效
• 关于监视ref定义的对象是否使用.value的问题：
  • 监视基本数据类型不用.value，因为使用.value就取出了实际值，无法监视
    
  • 监视一个对象，需要用.value，因为此时的.value是一个由reactive生成的Proxy对象；如果此时不使用.value,则需要配置deep:true
    

基本使用：

监视ref定义的响应式数据：

js:

html:

效果：

监视reactive定义的响应式数据：

js:

html:

效果：

监视reactive定义的响应式数据的某些属性：

js:

html:

效果：

完整代码：

watchEffect监视

总结：

• watch的套路是：既要指明监视的属性，也要指明监视的回调
• watchEffect的套路是：不用指明监视哪个属性，监视回调中用到哪个属性，就监视哪个属性
• watchEffect和computed有点像：
  • computed注重计算出来的值（回调的返回值），所以必须要写返回值
  • watchEffect注重过程（回调的函数体），所以不用写返回值

例子：

完整代码：

hook函数

总结：

• 本质是一个函数，把setup函数中使用的Composition API进行封装
• 类似于vue2.x中的mixin
• 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂

例子：

hooks目录下useMouse.js:

使用：

完整代码：

useMouse.js:

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'// 按照惯例，组合式函数名以“use”开头
export function useMouse() {// 被组合式函数封装和管理的状态const x = ref(0)const y = ref(0)// 组合式函数可以随时更改其状态。function update(event) {x.value = event.pageXy.value = event.pageY}// 一个组合式函数也可以挂靠在所属组件的生命周期上// 来启动和卸载副作用onMounted(() => window.addEventListener('mousemove', update))onUnmounted(() => window.removeEventListener('mousemove', update))// 通过返回值暴露所管理的状态return { x, y }
}

App.vue:

toRef和toRefs：

总结：

• 作用：创建一个ref对象，其value值指向另一个对象的某个属性
• 语法：const name = toRef(person,'name;)
• 应用：要将响应式对象的某个属性单独供给给外部使用
• 扩展：toRefs与toRef功能一致，但是可以批量创建多个ref对象，语法：toRefs(person),类似于对person的所有属性使用toRef()

例子：

完整代码：

其他组合式API

shallowReactive 与 shallowRef

总结：

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）
• shallowRef：只处理基本类型的响应式，不进行对象的响应式处理
• 什么时候用？
  • 如果有一个对象数据比较深，但变化时知识外层属性变化，则使用shallowReactive
  • 如果一个对象数据，后续功能不会修改该对象的属性，而是生成新的对象来替换，则使用shallowRef

例子：

完整代码：

readonly 与 shallowReadonly

总结：

• readonly：让一个响应式数据变为只读的（深只读）
• shallowReadonly：让一个响应式数据变成只读的（浅只读）
• 应用场景：不希望数据被修改

例子：

完整代码：

toRaw 与 markRaw

总结：

• toRaw:
  • 作用：将一个reactive生成的响应式对象转为普通对象
  • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面的更新
• markRaw:
  • 作用：标记一个对象，使其永远不会再成为响应式对象
  • 应用场景：
    1. 有些值不应该设置为响应式的，例如：复杂的第三方类库等
    2. 当渲染有不可变数据源的大列表时，跳过响应式转换可以提高性能

例子：

完整代码：

customRef

总结：

• 作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制

例子：

完整代码：

Provide 与 Inject

总结：

• 作用：实现祖与后代组件间通信
• 套路：父组件有一个provide选项用来提供数据，后代组件有一个inject用来使用这些数据

例子：

• provide：(App.vue中)
  

• inject：（DeepChild.vue中）
  

• 效果：
  

完整代码：

• 祖：App.vue

• 父：Footer .vue

• 孙：DeepChild.vue

isXxx

总结：

• isRef：检查一个值是否为一个 ref 对象
• isReactive：检查一个对象是否是由 reactive 创建的响应式代理
• isReadonly：检查一个对象是否由 readonly 创建的只读代理
• isProxy：检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

例子：

完整代码：

新的组件

Fragment

总结：

• 在Vue2中:组件必须有一个根标签
• 在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中。
• 好处:减少标签层级,减小内存占用

Teleport

官网：https://cn.vuejs.org/guide/built-ins/teleport.html

总结：

• Teleport 是一种能将我们的组件html结构移动到指定位置的技术
• to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。如： to="body"的作用就是告诉 Vue“把模板片段传送到 body 标签下”。

例子：

• 在MyModal.vue中使用Teleport将组件移动到html的body中：
  

完整代码：

• App.vue

• MyModal.vue

Suspense

总结：

• 等待异步组件时渲染一些额外内容，让应用有更好的体验；

• 使用步骤：

  1. 异步引入组件
     

  2. 使用Suspense包裹组件，并配置default（要显示哪个组件）与fallback（如果要显示的组件没加载完成，显示的内容）
     

例子：

• 使用Suspense标签：
  
• 把网络调成慢速3G，当子组件Child未加载出来的时候，显示正在加载...字样

• 过一段事件，才显示Child组件中的内容：
  
  这是子组件Child中的内容：
  

完整代码：

• App.vue

• App.vue

vue2 -> vu3 的其他变化：

全局API转移：

其他变化