Vue3学习(六)Vue3 + ts几种写法
前言
官网提到组合式api和选项式api
选项式api其实就是vue2的写法,组合式api是vue3的新写法(组合式api可以在script中使用setup()也可以使用<script setup>,<script setup>是setup()的语法糖,语法糖的写法在vue3.2后才支持)
参考
Vue3官网的一些文章
Vue3语法官网教程
官网迁移教程 (Vue2和Vue3差异点)
组合式api setup()用法
单文件组件 <sctipt setup>用法
Vue3使用setup()函数核心API写法
vue3中使用TypeScript
Vue3结合TS项目开发实践总结
Vue3写法总结
Vue3种使用<script setup>语法糖核心API写法
上手后才知道 ,Vue3 的 script setup 语法糖是真的爽
Vue3 中setup()和<script setup></script>
Vue3 <script setup>语法糖+ts+Hook实践探索
Vue3一些API用法
vue3 ref函数用法
Vue3中ref和reactive的区别
Vue3第一篇之ref和reactive详解扩展
实战
Vue3使用setup()函数
<script lang="ts"> import { defineComponent, onMounted, ref, watch, nextTick, computed, onBeforeUnmount } from '@vue/composition-api'; import { useVisibility } from '@live/hooks/src/useVisibility'; import { toWorkVideoPage, getCookie, parseQuery, toLiveRoomByUserId, openProfile, osName, query } from '@live/actions'; import { throttle, isInLiveRoom, isLowDeviceBiz } from '../../utils/init'; import { BOOKSTATUS, ENROLLSTATUS, EVENTSTATUS } from '../../schemas'; import loadingsvg from './img/loading.svg'; import type { PropType } from '@vue/composition-api'; import type { TTabPhotoList, TEventList, TTabs } from '../../schemas'; // import LoadingIcon from '@/components/LoadingIcon/index.vue'; import { showToast } from '@/utils/init'; import { sendShow, sendClick } from '@/logs/index'; import TabSwiper from '@/components/TabSwiper/index.vue'; // import LottieIcon from '@/components/LottieIcon/index.vue';export default defineComponent({components: {Swiper,Sticky,// LottieIcon,TabSwiper,// LoadingIcon,LottieIcon: () => import(/* webpackChunkName:"lottie-icon" */ '@/components/LottieIcon/index.vue'),},props: {tabPhotoList: {type: Array as PropType<TTabPhotoList[]>,default: () => [],},currentTabIndex: {type: Number,default: 0,},bookStatusLoading: {type: Boolean,default: false,},},emits: ['updateCurrentTabIndex', 'handleEnroll', 'handleBook',],setup(props, { emit }) {const swiperPanelRef = ref();const currentSwiperPanelIndex = ref(0);const setTimeoutId = ref();// 当前页面是否可见,settimeout中需要判断是否播放视频const isVisibility = ref(true);// 当前video是否可见,只有video可见 && 页面可见才播放视频const isVisibilityVideo = ref(true);const swiperPannelItemRef = ref();const laterRender = ref(false);setTimeout(() => {laterRender.value = true;});watch([() => props.currentTabIndex],() => {if (currentSwiperPanelIndex.value === 0) {sendShow(getPanelShowLog(0));}},{immediate: false,},);// 自动播放第一个视频onMounted(() => {sendShow(getPanelShowLog(0));handleVideoPlay();// 离开可视区不播放视频const io = new IntersectionObserver(res => {if (res[0].intersectionRatio > 0) {isVisibilityVideo.value = true;handleVideoPlay();} else {isVisibilityVideo.value = false;isVisibility.value = true;videoStop();}});io.observe(document.querySelector('.swiper-panel-main')!);});onBeforeUnmount(() => {videoStop();});useVisibility({visibleHandler: () => {console.log('----visibleHandler-00-0---');isVisibility.value = true;// 此处安卓端未生效,代码执行到,但是视频没有重新播放// if (osName !== 'android') { // fix 安卓偶先播放状态下漏出封面图// pc,ios,androidhandleVideoPlay(1000, false);// }},hiddenHandler: () => {isVisibility.value = false;console.log('----hiddenHandler-00-0---');// 此处安卓端未生效,代码执行到,但是视频没有因此暂停// if (osName !== 'android') {videoStop(false);// }},});// const videoVisibilityCallBack =const eventListByIndex = computed<TEventList[]>(() => {return (props.tabPhotoList[props.currentTabIndex] as TTabPhotoList).eventList || [];});const tabsByTabPhotoList = computed<TTabs[]>(() => {return props?.tabPhotoList?.map((item: TTabPhotoList) => {return {tabTitle: item?.tabTitle,tabCode: item?.tabCode,selectedTitle: item?.selectedTitle,};});});const onSwiperTabsChange = (index: number) => {// currentSwiperTabsIndex.value = index;emit('updateCurrentTabIndex', index);currentSwiperPanelIndex.value = 0;swiperPanelRef?.value?.to(0);handleVideoPlay();};const getPanelShowLog = (index: number) => {const event: any = (props as any).tabPhotoList[props.currentTabIndex].eventList[index];return {action: 'BLIND_DATE_VENUE_VIDEO_CARD',params: {author_id: event.authorInfo.userInfo.user_id,id: event.eventId,status: event.eventStatus,tab_name: props.tabPhotoList[props.currentTabIndex].tabTitle,video_id: event.photo.photoId,},};};const onSwiperPanelChange = (index, lastIndex) => {sendShow(getPanelShowLog(index));currentSwiperPanelIndex.value = index;handleVideoPlay();};const videoStop = (isInitPoster = true) => {try {if (isInLiveRoom()) {return;}// 暂停隐藏封面if (isInitPoster) {initPoster();}const dom = document.querySelectorAll('.swiper-panel-item video');dom.forEach((item: HTMLVideoElement) => {item?.pause();// item?.load();console.log('stop', item.className);});} catch (e) {console.log('error', 'videostop', e);}};/*** 播放视频处理:ref不太满足播放控制,采用document.querySelectorAll直接获取dom* 1.涉及到过渡动画,影响getBoundingClientRect计算,所以await nextTick();* 2.因为支持轮播,可能存在两个activitydom都处于选中状态,因此需要用for循环找到一个距离屏幕中心最近的item* inShowPoster: 安卓端点击视频跳转再次回到h5时候,封面会闪一下(不会暂停1s后播放),次case不隐藏封面*/const handleVideoPlay = (timeOut = 1000, isInitPoster = true) => {if (isInLiveRoom()) {return;}// fix 快速切换导致业务卡顿clearTimeout(setTimeoutId.value);videoStop(isInitPoster);setTimeoutId.value = setTimeout(() => {try {videoStop(isInitPoster);// console.error(' settimeout transform------', document.querySelector('.spu-swiper-inner').style.transform);if (isVisibility.value && isVisibilityVideo.value ) {const targetDom = getCurrentVideo();// play调用失败或者多次调用触发异常(The operation was aborted)targetDom?.play()?.catch(e => {console.log(e);});}} catch (e) {console.log('error', e);}}, timeOut);};const getCurrentVideo = () => {const activeDom = document.querySelectorAll('.swiper-panel-item.is-active video');const target = window.innerWidth / 2;let targetDom = activeDom?.[0] as HTMLVideoElement;let distance = Number.MAX_VALUE;for (const item of activeDom) {const left = item.getBoundingClientRect().left;if (Math.abs(left - target) < distance) {distance = Math.abs(left - target);targetDom = item as HTMLVideoElement;}}return targetDom;};const initPoster = () => {//const domPoster = document.querySelectorAll<HTMLElement>('.item-video-living.videoPoster');domPoster.forEach(item => {item && (item.style.opacity = '1');});};const toWorkVideoPageFn = (eventId: number, photoId: string, userId: string, eventStatus: number) => {if (isInLiveRoom()) {return;}sendClick({action: 'BLIND_DATE_VENUE_VIDEO_CARD',params: {author_id: userId,id: eventId,status: eventStatus,tab_name: props.tabPhotoList[props.currentTabIndex].tabTitle,video_id: photoId,},});// videoStop();toWorkVideoPage(photoId, '');};const handleBook = throttle((isCancel:boolean, eventId: number, userId: number, photoId: string) => {console.log('handleBook', isCancel, eventId, userId, photoId);if (!props.bookStatusLoading) { // 网络请求阶段bookStatusLoading为trueemit('handleBook', isCancel, eventId, userId, photoId);}}, 1000);const handleEnroll = throttle((isCancel:boolean, eventId: number, userId: number, photoId: string) => {console.log('handleEnroll', isCancel, eventId, userId, photoId);emit('handleEnroll', isCancel, eventId, userId, photoId);}, 1000);const handleOnline = (userId: number) => {// videoStop();const { authorId } = query;if ( String(authorId) === String(userId)) {showToast('已经在当前直播间');return;}if (userId) {toLiveRoomByUserId(String(userId), {liveSource: 'BLIND_DATE_CNY_PAGE_BUTTON',sourceType: 269,});}};const openProfileFn = (userId: number) => {// videoStop();openProfile(String(userId));};const onVideoWaiting = (id: string) => {// loadingconst domLoading = document.querySelectorAll<HTMLElement>(`.${id}`);domLoading.forEach(item => {item && (item.style.opacity = '1');});console.log('onVideoWaiting', id);};// 性能考虑,不采用display,用opacityconst onVideoPlaying = (id: string) => {try {// 关闭loadingconst domLoading = document.querySelectorAll<HTMLElement>(`.${id}`);domLoading.forEach(item => {item && (item.style.opacity = '0');});// 关闭posterconst domPoster = document.querySelectorAll<HTMLElement>(`.${id}_poster`);domPoster.forEach(item => {item && (item.style.opacity = '0');});const video = getCurrentVideo();video && (video.muted = false);} catch (e) {console.log('onVideoPlaying', e);}};const onVideoOtherEvent = throttle((name: string, id: string) => {if (name === 'timeupdate') {const dom = getCurrentVideo();if (dom?.readyState < 4 ) {onVideoWaiting(id);} else {onVideoPlaying(id);}}}, 1000);// 不是低端机 && 不在直播间const isShowVideo = () => {return !isLowDeviceBiz() && !isInLiveRoom();};const oneventvideo = (name, id) => {// const dom = getCurrentVideo();// console.log('name', name, id, dom.readyState);if (name === 'canplaythrough') {try {// 关闭loadingconst domLoading = document.querySelectorAll<HTMLElement>(`.${id}`);domLoading.forEach(item => {item && (item.style.opacity = '0');});} catch (e) {console.log('onVideoPlaying', e);}}};// 当前dom节点改变:loop模式下,边界场景下视觉上未切换,实际已切换,此时会出现有声音,无画面情况,此case需要重新播放视频const onDomChangePanel = (index, lastIndex) => {handleVideoPlay();};const getTextInfo = (title: string) => {return title.indexOf('「') === 0;};return {swiperPanelRef,currentSwiperPanelIndex,onSwiperTabsChange,onSwiperPanelChange,toWorkVideoPageFn,eventListByIndex,tabsByTabPhotoList,handleBook,handleEnroll,handleOnline,openProfileFn,isInLiveRoom,BOOKSTATUS,ENROLLSTATUS,EVENTSTATUS,onVideoWaiting,onVideoPlaying,loadingsvg,isShowVideo,swiperPannelItemRef,oneventvideo,onVideoOtherEvent,onDomChangePanel,getTextInfo,laterRender,};}, }); </script>
相关文章:

Vue3学习(六)Vue3 + ts几种写法
前言 官网提到组合式api和选项式api 选项式api其实就是vue2的写法,组合式api是vue3的新写法(组合式api可以在script中使用setup()也可以使用<script setup>,<script setup>是setup(ÿ…...
【前端】ES6:Proxy代理和Reflect对象
文章目录 1 Proxy代理1.1 get方法1.2 set方法1.3 has方法1.4 this问题 2 Reflect对象2.1 代替Object的某些方法2.2 修改某些Object方法返回结果2.3 命令式变为函数行为2.4 配合Proxy 1 Proxy代理 Proxy如其名,它的作用是在对象和和对象的属性值之间设置一个代理&am…...

基于微信开发助手企鹅音乐微信小程序的设计与实现(源码+文档+讲解)
博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…...
学习Spring Boot,应该从哪里开始学起
文章目录 前言1. Java基础2. Spring框架基础3. Spring Boot入门4. 搭建Spring Boot项目5. 编写RESTful API6. 数据库操作7. 安全性和测试8. 部署和运维9. 实践和项目总结前言 学习Spring Boot,应该从哪里开始学起 学习Spring Boot,你可以从以下几个步骤开始学起: 1. Java基…...

【JavaEE初阶】深入解析死锁的产生和避免以及内存不可见问题
前言: 🌈上期博客:【后端开发】JavaEE初阶—线程安全问题与加锁原理(超详解)-CSDN博客 🔥感兴趣的小伙伴看一看小编主页:GGBondlctrl-CSDN博客 ⭐️小编会在后端开发的学习中不断更新~~~ &#…...
企微群管理软件:构建高效社群运营的新引擎
在数字化营销日益盛行的今天,企业微信(简称“企微”)群作为企业与用户直接互动的重要平台,其管理与运营效率直接关系到企业的品牌形象、用户满意度及市场影响力。企微群管理软件,作为专为企微社群设计的高效管理工具&a…...

CORE 中间件、wwwroot
ASP.NET Core中间件组件是被组装到应用程序管道中以处理HTTP请求和响应的软件组件(从技术上来说,组件只是C#类)。 ASP.NET Core应用程序中的每个中间件组件都执行以下任务。 选择是否将 HTTP 请求传递给管道中的下一个组件。这可…...
SpringBoot 与 Maven 快速上手指南
SpringBoot 与 Maven 快速上手指南 在Java开发领域,Spring Boot和Maven是两个极其重要的工具,它们极大地简化了企业级应用的开发和构建过程。Spring Boot通过自动配置和起步依赖等特性,让开发者能够快速搭建起一个Spring应用;而M…...

大觅网之自动化部署(Automated Deployment of Da Mi Network)
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…...

【C++】入门基础知识-1
🍬个人主页:Yanni.— 🌈数据结构:Data Structure. 🎂C语言笔记:C Language Notes 🏀OJ题分享: Topic Sharing 目录 前言: C关键字 命名空间 命名空间介…...

Redis一些简单通用命令认识常用数据类型和编码方式认识Redis单线程模型
通用命令 get() / set() 这是Redis中两个最为核心的命令。 set插入 这里的key 和 value都是字符串,我们可以加双引号 或者单引号,或者不加。 get查找 如果查询的key值不存在,那么会返回一个 nil ,也就是代表空 在Redis中命令…...

使用电子模拟器 Wokwi 运行 ESP32 示例(Arduino IDE、VSCode、ESP32C3)
文章目录 Wokwi 简介安装客户端(Mac/Linux)创建 Token Arduino IDEVSCode 配置安装 wokwi 插件打开编译后目录 ESP32C3 示例Arduino IDE创建模拟器运行模拟器 Wokwi 简介 Wokwi 是一款在线电子模拟器。您可以使用它来模拟 Arduino、ESP32、STM32 以及许…...

C嘎嘎入门篇:类和对象(1)
前言: 小编在之前讲述了C的部分入门基础,读者朋友一定要掌握好那些,因为C的学习和C有点不同,C的知识都是比较连贯的,所以我们学好了前面才可以学习后面的内容,本篇文章小编将会讲述C真正的入门篇࿱…...

tomcat服务搭建部署ujcms网站
tomcat服务搭建部署ujcms网站 关闭selinux和防火墙 setenforce 0 && systemctl stop firewalld安装java环境 #卸载原有java8环境 yum remove java*#上传java软件包,并解压缩 tar -xf openjdk-11.0.1_linux-x64_bin.tar.gz && mv jdk-11.0.1 jdk11…...

unity_Occlusion_Culling遮挡剔除学习
unity_Occlusion_Culling遮挡剔除学习 文档: https://docs.unity.cn/cn/2019.4/Manual/occlusion-culling-getting-started.html没彻底搞明白,但是会用,虽然也不熟练 设置遮挡剔除 打开遮挡剔除面板 设置场景物体。设置为静态 设置场景 烘…...

vue初学随笔
Vue基础 Vue基本概念 Vue是什么 Vue是一个渐进式的JavaScript框架,它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。 渐进式:各个特性可以根据项目需要逐渐引入和…...

IDEA Dependency Analyzer 分析 maven 项目包的依赖
一、场景分析 javax.validation 是我们 SpringMVC 常用的数据校验框架。但是 javax.validation 是一个规范(Java Bean Validation,简称 JSR 380),它并没有具体的实现,它的常用实现,是hibernate-validator。…...

微信小程序 - 最新详细安装使用 Vant weapp UI 框架环境搭建详细教程
前言 自从 2024 年开始,小程序做了很多改变和升级, 导致网上很多搭建教程文章的教程失效了,本文来做最新的教程。 第一步 为了更贴合新手,我这里创建了一个纯净无任何业务代码的小程序项目。...

【C语言】手把手带你拿捏指针(完)(指针笔试、面试题解析)
文章目录 一、sizeof和strlen的对⽐1.sizeof2.strlen3.sizeof与strlen对比 二、数组和指针笔试解析1.一维数组2.字符、字符串数组和字符指针代码1代码2代码3代码4代码5代码6 3.二维数组4.总结 三、指针运算笔试题解析代码1代码2代码3代码4代码5代码6 一、sizeof和strlen的对⽐ …...
Vue中input框自动聚焦
在Vue中input自动聚焦的思路: 给需要聚焦的input设置ref <el-inputv-model"loginForm.username"ref"userNameInput"name"username"type"text"auto-complete"on"placeholder"username"keyup.enter.…...

C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

代码规范和架构【立芯理论一】(2025.06.08)
1、代码规范的目标 代码简洁精炼、美观,可持续性好高效率高复用,可移植性好高内聚,低耦合没有冗余规范性,代码有规可循,可以看出自己当时的思考过程特殊排版,特殊语法,特殊指令,必须…...

抽象类和接口(全)
一、抽象类 1.概念:如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象,这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法,包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中,⼀个类如果被 abs…...
二维FDTD算法仿真
二维FDTD算法仿真,并带完全匹配层,输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...
Qt学习及使用_第1部分_认识Qt---Qt开发基本流程
前言 学以致用,通过QT框架的学习,一边实践,一边探索编程的方方面面. 参考书:<Qt 6 C开发指南>(以下称"本书") 标识说明:概念用粗体倾斜.重点内容用(加粗黑体)---重点内容(红字)---重点内容(加粗红字), 本书原话内容用深蓝色标识,比较重要的内容用加粗倾…...
结合PDE反应扩散方程与物理信息神经网络(PINN)进行稀疏数据预测的技术方案
以下是一个结合PDE反应扩散方程与物理信息神经网络(PINN)进行稀疏数据预测的技术方案,包含完整数学推导、PyTorch/TensorFlow双框架实现代码及对比实验分析。 基于PINN的反应扩散方程稀疏数据预测与大规模数据泛化能力研究 1. 问题定义与数学模型 1.1 反应扩散方程 考虑标…...