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

系列文章目录

---

---

一、自定义 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>

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

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

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