vue3.0学习笔记 (自定义hoot)

最新推荐文章于 2024-09-11 14:42:29 发布

许你满眼星辰

最新推荐文章于 2024-09-11 14:42:29 发布

阅读量271

点赞数 1

文章标签：学习前端 vue.js

本文链接：https://blog.csdn.net/m0_58849641/article/details/125682699

版权

这篇博客介绍了在Vue3.0中如何利用onMounted和onBeforeUnmount生命周期钩子来动态监听窗口点击事件，保存坐标信息。通过封装方法，实现了组件挂载时添加事件监听器，卸载前移除监听器，确保了资源的正确释放。同时展示了如何在组件中引用并展示这些坐标数据。

摘要由CSDN通过智能技术生成

1.onMounted和onBeforeUnmount生命周期

<script>

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

export default {

  setup(){
    let coordinates=reactive({
      X:0,
      Y:0
    })
    
    //封装成一个方法函数
    function savePoint(event){
      coordinates.X=event.pageX
      coordinates.Y=event.pageY
    }

    //DOM元素挂载完  给window增加一个点击事件
    onMounted(()=>{
      window.addEventListener('click',savePoint)
    })

    //销毁之前  移除点击事件
    onBeforeUnmount(()=>{
      window.removeEventListener('click',savePoint)
    })

    return {
      coordinates
    }
  }
}
</script>

2.运用hoot （简单来说就是一个JS封装的方法）

先创建一个文件夹目录

在index.js写封装的方法

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

export default function () {

    let coordinates = reactive({
        X: 0,
        Y: 0
    })
    function savePoint(event) {
        coordinates.X = event.pageX
        coordinates.Y = event.pageY
    }
    //DOM元素挂载完
    onMounted(() => {
        window.addEventListener('click', savePoint)
    })

    //销毁之前  移除点击事件
    onBeforeUnmount(() => {
        window.removeEventListener('click', savePoint)
    })

    return coordinates
}

最后引用

<template>
  <h1>vue3.0</h1>

  <h3>X坐标{{userList.X}}</h3>

  <h3>Y坐标{{userList.Y}}</h3>

</template>

<script>
//引用的路径
import userCoord from './hoots/index'
export default {
  setup(){
    
    //调用方法  然后接收  注意接收的变量不能跟引用的方法用同一个
    let userList=userCoord()

    //最后return出去
    return {
      userList
    }
  }
}
</script>