Vue3 + vite + Ts + pinia + 实战 + 源码 +electron（2）

十二、异步组件&代码分包&suspense

顶层axios在setup中可以不需要使用async它会自动编译成这个

<script setup lang="ts">
import axios from 'axios'

const {data:{data}} = await axios({
    url:"http://localhost:8080/data.json"
})
<script/>

异步加载分包

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
const Dialog = defineAsyncComponent(() => import('../../components/Dialog/index.vue'))
 
//完整写法
const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),
 
  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间默认为 200ms
  delay: 200,
 
  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制并超时了
  // 也会显示这里配置的报错组件默认值是Infinity
  timeout: 3000
})
</script>

<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能则展示 fallback 插槽里的节点。

 <Suspense>
   <template #default>
       <Dialog>
           <template #default>
              <div>我在哪儿</div>
           </template>
        </Dialog>
    </template>
 
    <template #fallback>
         <div>loading...</div>
   </template>
</Suspense>

十三、Teleport传送组件

Teleport 是一种能够将我们的模板渲染至指定DOM节点不受父级style、v-show等属性影响但data、prop数据依旧能够共用的技术类似于 React 的 Portal。

主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下完全不受父级style样式影响

通过to 属性 插入指定元素位置 to="body" 便可以将Teleport 内容传送到指定位置
也可以自定义传送位置 支持 class id等 选择器
使用disabled 设置为 true则 to属性不生效  false 则生效
<Teleport :disabled="false"  to="body">
    <Loading></Loading>
</Teleport>

十四、keepalive

有时候我们不希望组件被重新渲染影响使用体验或者处于性能考虑避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

开启keep-alive 生命周期的变化

初次进入时 onMounted> onActivated
退出后触发 deactivated
再次进入
只会触发 onActivated
事件挂载的方法等只执行一次的放在 onMounted中组件每次进去执行的方法放在 onActivated中

 <keep-alive :include="" :exclude="" :max=""></keep-alive>

十五、transition动画组件

<button @click='flag = !flag'>切换</button>
<transition name='fade'>
    <div v-if='flag' class="box"></div>
</transition>

自定义过度类名 

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

十六、依赖注入Provide / Inject

父组件

import { provide } from 'vue';
import Child from './components/Child.vue';
provide("color","我是顶级父组件")

子组件

const color = inject("color")
console.log(color);

十七、兄弟之间的传参

方法一传给父亲--》儿子

方法二bus全局事件总线传参。废除了

方法三mitt

        安装

 npm i mitt -S

        全局引入mitt

import mitt from 'mitt'
const Mit = mitt()
//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}

const app = createApp(App)
// 挂载到全局组件
app.config.globalProperties.$Bus = Mit
app.use(store).use(router).mount('#app')

        A组件派发事件

<template>
  <div>
    <button @click="emit">点我派发事件</button>
  </div>
</template>

<script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
const emit = () => {
    instance?.proxy?.$Bus.emit('on-click', 100)
}
</script>

        B组件接收事件

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('on-click', (num) => {
    console.log(num,'===========>B')
})

监听所有事件

instance?.proxy?.$Bus.on('*',(type,num)=>{
    console.log(type,num,'===========>B')
})

 移除监听的事件

instance?.proxy?.$Bus.off('on-num',Fn)//unListen

移除所有监听事件

instance?.proxy?.$Bus.all.clear() 

十八、自定义指令

自定义指令简写。鉴权 directer

<template>
  <div>
    <button v-has-show="'create'">创建</button>
    <button v-has-show="'edit'">新建</button>
    <button v-has-show="'del'">删除</button>
  </div>
</template>

<script setup lang='ts'>
import type { Directive } from 'vue';

const permission = [
  "create",
  "edit",
  "del"
]

//自定义指令
const vHasShow:Directive<HTMLElement,string> = (el,bingding) =>{
  console.log(el,bingding);
  if(!permission.includes(bingding.value)){
    el.style.display = 'none'
  }
}

</script>

十九、自定义Hooks

• Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数

二十、Vue3定义全局函数和变量

设置

const app = createApp({})
app.config.globalProperties.$http = () => {}

读取

const app = getCurrentInstance()
console.log(app?.proxy?.$name)

二十一、自定Vue3插件

二十二、样式穿透

vue2/deep/        vue3deep(类名)