这是我参与更文挑战的第25天，活动详情查看： 更文挑战

一、自定义hook

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

新建一个hooks目录，专门放公共代码，这里我们做一个获取鼠标点击的x，y抽的方法

开始编写公共方法

import {onBeforeUnmount, onMounted, ref} from 'vue'

export function useMouseClick() {
    // 初始化x,y轴坐标
    let x = ref(0)
    let y = ref(0)

    // 鼠标点击后的方法
    let mouseClick = (event: MouseEvent) => {
        x.value = event.pageX
        y.value = event.pageY
    }

    // 页面初始化的时候监听点击事件
    onMounted(()=>{
        window.addEventListener('click',mouseClick)
    })

    // 页面销毁的时候移除监听点击事件
    onBeforeUnmount(()=>{
        window.removeEventListener('click',mouseClick)
    })

    // 导出坐标
    return {
        x,
        y
    }
}

最后在需要的页面引入这个公共方法

<template>
  <div>
      <p>x: {{x}}</p>
      <p>y: {{y}}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import {useMouseClick} from '../hooks/event-mouse'

export default defineComponent({
  name: 'hook',
  setup() {
      let {x,y} = useMouseClick()
      return {
          x,
          y
      }
  }
});
</script>

<style scoped>

</style>

效果

二、shallowReactive与shallowRef

• shallowReactive只处理对象内最外层属性的响应式也就是浅响应式。
• shallowRef值处理基本数据类型的响应式，不进行引用类型的响应式。

先看改变基本数据类型的shallowRef浅响应式

<template>
  <div>
      <p>ref基本数据A: {{refDataA}}  <button @click="changeRefDataA">改变ref基本数据A</button></p>
      <p>ref基本数据B: {{refDataB.innerB}}  <button @click="changeRefDataB">改变ref基本数据B</button></p>
  </div>
</template>

<script lang="ts">
import { defineComponent,shallowRef} from 'vue';

export default defineComponent({
  name: '',
  setup() {
      let refDataA = shallowRef(0)
      let changeRefDataA = () => {
          refDataA.value++
      }
      let refDataB = shallowRef({innerB: 0})
      let changeRefDataB = () => {
          refDataB.value.innerB ++
      }

      return {
         refDataA ,
         changeRefDataA,
         refDataB,
         changeRefDataB
      }
  }
});
</script>

<style scoped>

</style>

A可以改变, B不行

接下来我们测试引用数据类型shallowReactive的浅响应式

 <p>reactive引用数据A: {{reactiveDataA.a}}  <button @click="changereactiveDataA">改变reactive引用数据A</button></p>
      <p>reactive引用数据B: {{reactiveDataB.b.innerB}}  <button @click="changereactiveDataB">改变reactive引用数据B</button></p>
      
      
        let reactiveDataA = shallowReactive({a:0})
      let changereactiveDataA = () => {
         reactiveDataA.a++ 
      }
      let reactiveDataB = shallowReactive({b: {innerB: 0}})
      let changereactiveDataB = () => {
          reactiveDataB.b.innerB++
      }
      
      return {
        reactiveDataA ,
         changereactiveDataA,
         reactiveDataB,
         changereactiveDataB,
      }