系列文章目录

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
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

初始点：

找到了个浪漫点：

二、toRef 和 toRefs

toRef

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

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

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