Vue3 —— 常用 Composition API（二）（hook 函数、toRef 和 toRefs）

系列文章目录

内容	参考链接
Vue3	创建 Vue3.0 工程
Vue3 - Composition API（零）	setup函数、ref函数、reactive函数、响应式、reactive对比ref
Vue3 - Composition API（一）	computed函数、watch函数、watchEffect函数、生命周期钩子
Vue3 - Composition API（二）	hook 函数、toRef 和 toRefs
Vue3 - 其他 Composition API	shallowReactive、shallowRef、readonly、shallowReadonly、toRaw、markRaw…
Vue3 - 新的组件及一些改变	Fragment、Teleport、Suspense、其他的改变

---

---

一、自定义 hook 函数

什么是 hook？

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

实例

1. 在 src 下创建 hooks 文件夹
2. 在 hooks 文件夹中创建 usexxx.js 文件 （一般都以 use- 开头）
   
3. 在 usexxx.js 中进行函数封装，并暴露出来
4. 记得在函数最后返回要用到的属性
5. 最后在组件中导入它就可以使用了

./hook/usePoint.js：定义鼠标打点的相关内容

	import { reactive, onMounted, onBeforeUnmount } from "vue";
	export default function savePoint() {
	  // 实现鼠标打点相关的数据
	  let point = reactive({
	    x: 0,
	    y: 0,
	  });
	  // 实现鼠标打点相关的方法
	  function savePoint(event) {
	    point.x = event.pageX;
	    point.y = event.pageY;
	    console.log(event.pageX, event.pageY);
	  }
	  // 实现鼠标打点相关的钩子
	  onMounted(() => {
	    window.addEventListener("click", savePoint);
	  });
	  onBeforeUnmount(() => {
	    window.removeEventListener("click", savePoint);
	  });
	
	  return point
	}

Demo.vue：导入 hooks 文件夹里面的 js 文件，直接使用

	<template>
	  <div>
	    <h3>当前点击时鼠标的坐标为：x：{{point.x}}，  y：{{point.y}}</h3>
	  </div>
	</template>
	
	<script>
	import usePoint from '../hooks/usePoint'
	export default {
	  name: "Demo",
	  setup() {
	    // 数据
	    let point = usePoint()
	
	    // 返回一个对象
	    return {  point };
	  },
	
	};
	</script>

初始点：

找到了个浪漫点：

二、toRef 和 toRefs

toRef

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

	// 语法
	const name = toRef(person, 'name')

2. 应用：要将响应式对象中的某个属性单独提供给外部使用时
3. 实例：

1. 在返回的对象中，每个属性都用 toRef() 响应式接收
2. 在模板字符串里面直接写属性名，就不用使用 . 获取了

	<template>
	  <div>
	    <h3>姓名：{{name}}</h3>
	    <h3>年龄：{{age}}</h3>
	    <h3>薪资：{{salary}}K</h3>
	    <button @click="name+='~'">修改姓名</button>
	    <button @click="age++">增长年龄</button>
	    <button @click="salary++">增加薪资</button>
	  </div>
	</template>
	
	<script>
	import { reactive, toRef } from "vue";
	export default {
	  name: "Demo",
	  setup() {
	    // 数据
	    let person = reactive({
	      name: '张三',
	      age: 18,
	      job: {
	        j1:{
	          salary: 20
	        }
	      }
	    })
	
	    // 返回一个对象
	    return {
	      name: toRef(person, 'name'),
	      age: toRef(person, 'age'),
	      salary: toRef(person.job.j1, 'salary')
	    };
	  },
	};
	</script>

分别点击各个按钮数次后（响应式更新）：

toRefs

1. 作用：toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象，语法 toRefs(person)
2. 实例：

1. toRefs 是一个对象，对象里面不能直接写对象，所有使用 ... 展开运算符
2. 只对 person 的一级键值对有效，更深层次的还是需要通过 . 手动获取

	<template>
	  <div>
	    <h3>姓名：{{name}}</h3>
	    <h3>年龄：{{age}}</h3>
	    <h3>薪资：{{job.j1.salary}}K</h3>
	    <button @click="name+='~'">修改姓名</button>
	    <button @click="age++">增长年龄</button>
	    <button @click="job.j1.salary++">增加薪资</button>
	  </div>
	</template>
	
	<script>
	import { reactive, toRefs } from "vue";
	export default {
	  name: "Demo",
	  setup() {
	    // 数据
	    let person = reactive({
	      name: '张三',
	      age: 18,
	      job: {
	        j1:{
	          salary: 20
	        }
	      }
	    })
	
	    // 返回一个对象
	    return {
	      ...toRefs(person)
	    };
	  },
	};
	</script>

分别点击各个按钮数次后（响应式更新）：

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路，持续更新中…