Vue3 第四节 自定义hook函数以及组合式API

1.自定义hook函数

2.toRef和toRefs

3.shallowRef和shallowReactive

4.readonly和shallowReadonly

5.toRaw和markRaw

6.customref

一.自定义hook函数

① 本质是一个函数，把setup函数中使用的Composition API 进行了封装,类似于vue2.x中的mixin

    自定义hook函数可以进行代码复用，让setup中的逻辑更清晰

② 代码实现

（1）新建hooks

（2） 将相关功能和接口写入

usePoint.js

import { reactive, onMounted, onBeforeUnmount } from "vue"
export default function () {
  let point = reactive({
    x: 0,
    y: 0
  })

  function savePoint (event) {
    console.log(event.pageX, event.pageY)
    point.x = event.pageX
    point.y = event.pageY
  }
  onMounted(() => {
    window.addEventListener('click', savePoint)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('click', savePoint)
  })

  return point
}

 （3）引入和使用

（4）代码汇总

Demo.vue

Test.vue

二. toRef和toRefs

① 作用：创建一个ref对象，其value值指向另一个对象中的某个属性

② 应用: 要将响应式对象中的某个属性单独提供给外部使用，不想丢失响应式

toRef与toRefs功能一致，toRefs可以批量创建多个ref对象，处理这个对象中的所有属性

 ③ 代码

三.shallowRef和shallowReactive

引入：import { shallowReactive, shallowRef } from 'vue'

① shallowReactive:只处理对象最外层属性的响应式（浅响应式）

 ② shallowRef: 只处理基本数据类型的响应式，不进行对象的响应式处理

 ③ 使用场景：

• 如果有一个对象数据，结构比较深，但变化只是外层属性变化的时候使用shallowReactive
• 如果有一个对象数据，后续功能不会修改对象中的属性，而是生成新的对象替换 =>  shallowRef

 四.readonly和shallowReadonly

应用场景：不希望数据被修改

① readonly: 让一个响应式数据变成只读的（深只读）

 ② shallowReadonly：只限制对象中的第一层数据

对ref的对象同样有用

 五.toRaw和markRaw

 ① toRaw

• 作用：将一个由reactive生成的响应式对象转为普通对象
• 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新

 ② markRaw

• 作用：标记一个对象，使其永远不会再成为响应式对象
• 应用场景

     1.有些值不应该被设置为响应式的，例如复杂的第三方类库等

     2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

 操作数据，数据确实发生变化了，但是界面不会发生变化，没有响应式

六.customref

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

实现防抖效果代码实现：