【九月打卡】第12天 VUE3+TS从0~1开发&学习回顾@慕课网原创_慕课网

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：项目起航 - 准备工作和第一个页面（12~18节）

课程讲师：张轩

课程内容：

1、优化上节课学习的dropdown组件点击组件外区域隐藏下拉菜单；
2、讨论项目中样式的解决方案
3、思考项目中使用编码规范，命名规范，项目结构和git提交规范等
4、学习使用 ESlint 的配置文件
5、回顾本章节学习的内容

课程收获：

封装use函数监听鼠标点击区域

上节课学习了编写dropdown组件，但是还存在需要优化的地方就是当我们点击按钮的时候可以隐藏/显示菜单，但是在实际开发中为了更加友好的交互，产品经理经常会要求我们点击菜单以外的区域也要将下拉菜单隐藏，这个时候我们就要监听鼠标点击的区域，从而控制菜单的隐藏。这时候我们就要想到监听事件，而一般使用监听事件时也要注意移除监听事件，避免造成内存泄漏。在vue3中的这类事件我们通常可以封装为hooks，以便抽离代码，精简文件，同时实现多组件复用。具体代码编写如下：

// hooks文件
import { ref, onMounted, onUnmounted, Ref } from 'vue'
const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {
  const isClickOutside = ref(false)
  const handler = (e: MouseEvent) => {
    if (elementRef.value) {
      if (elementRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false
      } else {
        isClickOutside.value = true
      }
    }
  }
  onMounted(() => {
	 // 监听事件
    document.addEventListener('click', handler)
  })
  onUnmounted(() => {
	 // 移除监听事件
    document.removeEventListener('click', handler)
  })

  return isClickOutside
}
export default useClickOutside

// 导入使用
<template>
  <div ref="dropdownRef">
    <div v-if="isClickOutside">点击下拉菜单以外区域</div>
  </div>
</template>
<script lang="ts">
	import { ref, defineComponent, watch } from 'vue'
	import useClickOutside from '../hooks/useClickOutside'
	export default defineComponent({
	  name: 'tsVue3',
	  setup () {
	    const dropdownRef = ref<null | HTMLElement>(null)
	    const isClickOutside = useClickOutside(dropdownRef)

	    watch(isClickOutside, () => {
	      console.log(isClickOutside)
	    })
	    return {
	      dropdownRef,
	      isClickOutside
	    }
	  }
	})
</script>

学习内容回顾

通过老师这整个课程的实习，收获良多，从多typescript和vue3的基础理论学习到项目实际运用老师讲了很多注意事项都是我们平时可能忽略或者有常使用的。学习从拿到一个需求开始，从需求分析到项目搭建准备，以及项目目录规划，文件命名规范再到eslint代码编写规范，还有具体的组件拆分，获取用户数据，组件编写和优化等一系列开发开发流程讲的面面俱到，相信对我实际的项目运作会起到很好的帮助，毕竟这些都是我们开发过程中需要注意的事项。

跟老师一起学习的过程中，我也在动手编写代码，认真思考老师留下的讨论的问题，所以不仅收获项目知识，也收获了思考能力和动手能力，学习代码就是要动手编写，这样才能学习和巩固，做到真正的掌握，感谢老师这个课程，让我收获朗多~~

【九月打卡】第12天 VUE3+TS从0~1开发&学习回顾