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>