你所不知道的vue组件

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

对于组件想必大家都不陌生，目前多数框架都是组件化编程，今天就说说vue的组件

组件注册

使用app.component注册局部组件
使用Vue.component注册全局组件

注册局部组件

app.component("my-component",{
    //传入配置
    
})

注册全局组件

Vue.createApp(App).component('my-component', {
  //配置
})

动态组件

我们有这样的需求，就是三个组件，三个按钮每点击那个按钮，显示那个组件

此时我们的目录结构如图，App组件下面有三个组件About，AsyncAddComponent，Message。 在app中生成三个button

App中
<template>
    <button 
    v-for="(item,index) in arr"   //循环创建
    :key="index"                  //设置key
    @click="show(item)"           //绑定事件
    >{{item}}</button>
</template>
<scirpe>
    export default {
      name: 'App',
      data() {
        return {
          arr : ["About","Message","Nav"],
          current:"About"
        }
      },
      methods: {
        show(item){
          this.current = item
        },
    }
</scirpe>

这样我们就创建了三个button。并且绑定show事件，当我们点击是current就会变成点击的那个组件的值。 但是此时的页面是不会展示我们需要展示的页面，我们引入一个标签

Component标签

<button 
    v-for="(item,index) in arr" 
    :key="index" 
    @click="show(item)"
    >{{item}}
</button>
<component 
    :is="current" 
    >
</component>

我们引入component标签，并且配置is属性，此时的is属性的值就代表我们的组件。 当current=about时，他就会展现about组件，必须要注意，此时的is指的是组件的名称，当我们点击按钮触发show事件，current的值会改变，页面也就会跟着改变

但是当我们点击按钮切换组件时，是会销毁组组件的，我们试一下

在about组件中使用beforeUnmout钩子

about
  beforeUnmount() {
    console.log("about被销毁");
  },

看一下浏览器，此时的about组件没有输出

我们切换到message组件

message组件显示，并且输出了about被销毁，可是在我们实际开发中，根据业务场景，我们不需要销毁 这里我们引入一个标签标签

Keep-alive标签

keep-alive标签可以页面切换，保持组件不被销毁

直接把组件放到keep-alive标签里面就可以

  <keep-alive>
    <component :is="curr" @pageClick="pageClick2" name="scc"></component>
  </keep-alive>

这样，切换组件就不会销毁组建了 keep-alive标签有三个属性

• include：（string,arr,正则）匹配组件的name属性 那些需要缓存
• exclude 哪些不需要缓存
• max 最多可以缓存多少 ，如果缓存到最大，那么缓存下一个时，会把最长时间没有访问的清除掉 这里就不一一演示，感兴趣的同学自己去试试

异步组件

先说一下webpack的分包

webpack分包

webpack想要分包，需要在引入的时候使用把import './' 改成函数形式

我们创建一个sum函数，并且封装成math.js文件
export function sum(num1,num2){
    return num1+num2
}

在App组件中引入

import("./components/math").then((res)=>{
  res.sum(1,2)
})

import返回一个promise对象，成功后我们直接调用sum。

此时我们执行打包，可以看到分包完成

vue中如何分包呢

vue分包与异步加载

vue中需要引入defineAsyncComponent

import {defineAsyncComponent} from 'vue'

defineAsyncComponent是一个函数，我们需要执行它，需要我们传给他一个参数，我们可以这样传给他一个promise对象

const AsyncComponent = defineAsyncComponent(
    ()=>import("./components/AsyncAddComponent.vue")
)

此时我们的回调函数返回的是一个promise对象，和webpack一致了，也可以实现分包

我们也可以传入一个对象

const AsyncComponent = defineAsyncComponent({
  loader:()=>import("./components/AsyncAddComponent.vue"),
  loadingComponent:loading.vue,
  onerror:function(err,retry,attempts){
    // err:错误信息
    // retry：函数调用retry尝试重新加载
    // attempts纪录尝试次数

  }
  delay:2000          //延时2s
})

• loader是我们需要展示的组件
• loading是加载中需要展示的
• onerror是发生错误执行的函数

VUE3 suspense特性

该组件有两个插槽
default：如果default可以显示，则显示
fallback：如果default不可以显示，则显示

<suspense>
    <template #default>
      <async-component></async-component>
    </template>
    <template #fallback>
      <loading></loading>
    </template>
</suspense>

结束

就到这疫情早点结束，快快离开