持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情。

今天主要学习Vue3的钩子函数，shallowReactive与shallowRef。

钩子函数

钩子函数也称为自定义hook，它的作用类似于Vue2中的mixin，是一个可复用的功能函数，钩子函数的优势可以很清楚知道复用功能代码的来源，比较简洁易懂。

以 获取鼠标的位置 为例：

第一步

新建一个ts文件，初始化坐标，在页面挂载后绑定事件，页面离开时卸载绑定的事件：

import {ref,onMounted,onBeforeUnmount} from "vue";
//钩子函数命名规范通常用use开头
export function useMousePosition(){
    //初始化坐标
    let x=ref(0);
    let y=ref(0);

    //用于收集鼠标点击坐标的函数
    let updatePosition=(event:MouseEvent)=>{
        x.value=event.pageX;
        y.value=event.pageY;
    };

    //挂载后绑定事件
    onMounted(()=>{
        document.addEventListener("click",updatePosition);
    });
    //页面离开时卸载绑定的事件
    onBeforeUnmount(()=>{
        document.removeEventListener("click",updatePosition);
    })
    return {x,y}
}

第二步

在页面中使用的时候，需要引入刚刚的钩子函数：

<template>
  <div>鼠标的位置：x:{{ x }}，y:{{ y }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useMousePosition } from '../hooks/event-mouse';
export default defineComponent({
  name: 'hook',
  setup() {
    let { x, y } = useMousePosition();
    return {
      x,
      y,
    };
  },
});
</script>

这就是一个钩子函数的简单使用了。

shallowReactive与shallowRef

shallowReactive

shallowReactive只处理对象内最外层属性的响应式也就是浅响应式；

示例：

<template>
  <div>
    {{ obj }} <button @click="updateA">更新A的值</button>
    <button @click="updateC">更新C的值</button><br />
  </div>
</template>

<script lang="ts">
import { defineComponent, shallowReactive } from 'vue';
export default defineComponent({
  name: 'shallow',
  setup() {
    let obj = shallowReactive({ a: 1, b: { c: 2 } });
    let updateA = () => {
      obj.a += 1; // 浅层是响应式，所以是可以更新的
    };
    let updateC = () => {
      obj.b.c += 1; // 深层不是响应式，所以是不能响应式的更新数据
    };

    return {
      obj,
      updateA,
      updateC,
    };
  },
});
</script>

shallowRef

shallowRef只处理基本数据类型的响应式，不进行引用类型的响应式处理；

示例：

<template>
  <div>
    {{ str }} <button @click="updateStr">更新str</button><br />
    {{ objRef }} <button @click="updateObj">更新obj</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, shallowRef } from 'vue';
export default defineComponent({
  name: 'shallow',
  setup() {
    let str = shallowRef('羊肉串');
    let updateStr = () => {
      str.value = '啤酒'; // 基本数据类型是响应式，是可以响应式的更新数据
    };
    let objRef = shallowRef({ title: '花生' });
    let updateObj = () => {
      objRef.value.title = '毛豆'; // 引用类型不是响应式，就不能响应式的更新数据
    };
    return {
      str,
      updateStr,
      objRef,
      updateObj,
    };
  },
});
</script>

接下来继续学习Vue3的知识点~