vue3笔记5之“生命周期、复用的hook”

一、生命周期

1. Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

• beforeDestroy改名为 beforeUnmount销毁之前-在事件里面的所有对数据的更改，都不会对数据进行更新（一般，关闭定时器，取消订阅消息、解绑自定义事件等收尾操作）

• destroyed改名为 unmounted  销毁之后-没什么用，被忽略

2.可以直接已配置项的形式使用生命周期钩子，也可以使用组合式API的形式使用，尽量统一

一般来说，组合式API里的钩子会比配置项的钩子先执行，组合式API的钩子名字有变化

• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

  • beforeCreate===>setup()创建之前，在数据监测和数据代理之前

  • created=======>setup()创建之后，在数据监测和数据代理之后

  • beforeMount ===>onBeforeMount未经vue编译-挂载之前

  • mounted=======>onMounted经vue编译-挂载之后（一般，开启定时器，发送网络请求、订阅消息、绑定自定义事件、等初始化操作）

  • beforeUpdate===>onBeforeUpdate数据更新之前，页面是旧的数据

  • updated =======>onUpdated数据更新之后，页面是旧的数据

  • beforeUnmount ==>onBeforeUnmount销毁之前

  • unmounted =====>onUnmounted销毁之后-没什么用，

2.自定义hook函数（重点）

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。

• 类似于vue2.x中的mixin。

• 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

创建一个hooks文件夹，里面创建文件usePoint.js

import { reactive, onMounted, onBeforeUnmount } from "vue";
export default function() {
  //实现鼠标“打点”相关的数据
  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;
}

在组件中使用

<template>
	<h2>我是HelloWorld组件</h2>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
	import usePoint from '../hooks/usePoint'
	export default {
		name:'HelloWorld',
		setup(){
			const point = usePoint()
			return {point}
		}
	}
</script>