vue3--自定义hook函数

类似于vue2中的mixin，将setup函数中使用的composition API进行了封装
优势：复用代码，让setup中的逻辑更清楚易懂

代码演示：
在src下创建个hooks包

hookdemo

<template>
<h2>当前求和为：{{sum}}</h2>
<button @click="sum++">点我加一</button>
<h2>当前点击是鼠标的坐标: x:{{point.x}}  ,y:{{point.y}} </h2>
</template>

<script>
import { ref} from "vue";
import usePoint from '../hooks/usePoint';
export default {
  name: "HookDemo",
  setup(){
   
   let sum = ref(0)
   let point = usePoint()

    // 返回一个对象（常用）
    return {
      sum,
      point
    }
  },

}
</script>

usePoint.js

import { ref, 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
}

app:

<template>
  <!-- vue3的组件中的模板结构可以没有根标签 -->
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>工作:{{person.job.type}}</h2>
  <h2>薪水：{{person.job.salary}}</h2>
  <h2>爱好：{{person.hobby}}</h2>
  <button @click="changeInfo">修改人的信息</button>
  <!-- <Demo @hello="showHelloMsg" msg="你好啊">
    <template v-slot:qwe>
      <span>春风霓裳</span>
    </template>
  </Demo> -->
  <WatchDemo/>
   <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
   <LiveCycleDemo v-if="isShowDemo"/>
   <HookDemo/>
</template>

<script>
import { ref, reactive } from "vue";
import Demo from "./components/Demo";
import WatchDemo from "./components/WatchDemo";
import LiveCycleDemo from "./components/LiceCycleDemo";
import HookDemo from "./components/HookDemo";
export default {
  name: "App",
  components: { Demo,WatchDemo,LiveCycleDemo,HookDemo },
  // // vue2的写法
  // data() {
  //   return {

  //   }
  // },
  // methods: {

  // },
  //
  // 此处测试一下setup,暂时不考虑响应式
  setup() {
    // 数据
    // let name = ref('张三')
    // let age = ref(18)
    // // let job = ref({
    // //     type:'前端工程师',
    // //     salary:'30k'
    // //   })
    //  let job = reactive({
    //     type:'前端工程师',
    //     salary:'30k'
    //   })
    //   let hobby = reactive(['抽烟','喝酒','烫头'])
    let isShowDemo = ref(true)
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        type: "前端工程师",
        salary: "30k",
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });

    // 方法
    function changeInfo() {
      person.name = "李四";
      person.age = 48;
      // job.value.type = 'UI设计师'
      person.job.type = "UI设计师";
      console.log(person);
      // console.log(name,age)
      person.hobby[0] = "学习";
    }
    function showHelloMsg(value) {
      alert(`你触发了hello事件，我收到的参数是：${value}`);
    }

    return {
      // name,
      // age,
      // job,
      // hobby,
      person,
      changeInfo,
      showHelloMsg,
      isShowDemo,
    };
  },
};
</script>

<style>
</style>

结果：