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.pageXpoint.y = event.pageY}onMounted(() => {window.addEventListener('click', savePoint)})onBeforeUnmount(() => {window.removeEventListener('click', savePoint)})return point
}

 （3）引入和使用

（4）代码汇总

Demo.vue

<template><h2>当前求和为:{{ sum }}</h2><button @click="sum++">点我+1</button><hr /><h2>当前点击时鼠标的坐标为:x : {{ point.x }} y:{{ point.y }}</h2>
</template>
<script>
import usePoint from '../hooks/usePoint'
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
export default {name: 'Demo',// 数据setup () {let sum = ref(0)let point = usePoint()return {sum,point}},
}
</script><style>
</style>

Test.vue

<template><h2>我是Test组件</h2><h2>当前点击时鼠标的坐标为:x : {{ point.x }} y:{{ point.y }}</h2>
</template><script>
import usePoint from '../hooks/usePoint'
export default {name: 'Test',setup () {const point = usePoint()return { point }}}
</script>

二. toRef和toRefs

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

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

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

 ③ 代码

<template><h4>{{ person }}</h4><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>薪资：{{ job.j1.salary }}</h2><button @click="name += '~'">修改姓名</button><button @click="age++">增长年龄</button><button @click="job.j1.salary++">涨薪</button>
</template>
<script>
import { reactive, ref, toRef, toRefs } from 'vue'
export default {name: 'Demo',// 数据setup () {let person = reactive({name: '张三',age: 18,job: {j1: {salary: 20}}})return {person,// name: toRef(person, 'name'),// age: toRef(person, 'age'),// salary: toRef(person.job.j1, 'salary')...toRefs(person)}}
}
</script><style>
</style>

三.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，并对其依赖项跟踪和更新触发进行显式控制

实现防抖效果代码实现：

<template><input type="text" v-model="keyWord" /><h3>{{ keyWord }}</h3>
</template><script>
import { ref, customRef } from 'vue'
import Demo from './components/Demo.vue'
export default {name: 'App',setup () {// 自定义reffunction myRef (value, delay) {let timerreturn customRef((track, trigger) => {return {get () {track() // 通知Vue追踪value的变化console.log('有人从myRef中读取数据了')return value},set (newValue) {console.log('有人把myRef中的数据改了')clearTimeout(timer)timer = setTimeout(() => {value = newValuetrigger() // 通知vue去重新解析模板}, delay)}}})}let keyWord = myRef('hello', 500)return { keyWord }}
}
</script>