vue3.0---组件的挂载

• 一、单组件创建
• 二、组件的注册(同步挂载)
• • 1.局部注册
  • 2.全局注册
• 三、动态组件和异步组件
• • 1.动态组件
  • 2.异步组件
  • • (1) 全局异步挂载
    • • 方案1
      • 方案2
      • 方案3(最常用)
    • (2)局部异步挂载
  • 3.加载异步组件时处理组件的加载状态

• vue的开发模式是MVVM开发模式，主要使用的是单组件开发(组件模块进行开发)

一、单组件创建

• 文件后缀.vue
• 分为三个结构：template script style

二、组件的注册(同步挂载)

1.局部注册

• 在哪里挂载，就在哪里注册，类似局部变量。
• 那么，怎么注册组件呢？
• 在当前组件内部使用component属性直接声明挂载。
• 要注册组件，先引入当前组件。

import Header from '@/components/Head.vue';
import Body from './components/Body';

• 其中@路径代表src开发目录，也可以写成相对目录./
• 注册方式：以key:value的方式进行注册。
• 若是key和value的值相同，则可以简写。
• 挂载的组件写的时候和标签一致，全闭合和自闭合。

	<v-header></v-header>
   <Body/>
   
export default {
 name: 'App',
 components:{
   'v-header':Header,
   //若是key和value的值相同，则可以简写
   Body
 }
}

2.全局注册

• 在整个vue对象上进行注册。
• 可以在main.js中接入vue变量进行全局注册。

import { createApp } from 'vue'
import App from './App.vue'
let Vue=createApp(App)
//返回的是一个vue对象
console.log(Vue);
//引入组件
import MessageBox from '@/components/common/Message.vue';
//全局注册
Vue.component('v-MessageBox',MessageBox);
Vue.mount('#app')

• 以上的这些组件注册方案均属于同步挂载（大量使用可能会造成加载慢）。

三、动态组件和异步组件

1.动态组件

• 在动态组件上使用keep-alive。
• 也就是使用keep-alive标签实现组件的动态，搭配使用:is属性动态绑定组件。
• setup：它的加载和组件的生命周期有关（在组件挂载之前执行setup的API），因为要合并到当前组件，所以需要返回值。
• 响应式监听方案
• vue3.0提供的API
  

<h3>使用keep-alive实现动态绑定组件</h3>
   <div class="keep-box">
       <button @click="changeStatus(true)">第一个</button>
       <button @click="changeStatus(false)">第二个</button>
       <keep-alive>
           <component :is="data.componentId"></component>  
       </keep-alive>
   </div>
   <h3 @click="handle()">{{msginfo}}</h3>
   <div>
       <h3>{{list.a}}</h3>
       <h3>{{list.b.c}}</h3>
       <button @click="change">修改数据</button>
   </div>
</div>
</template>

//挂载两个小组件
import KeepOne from "./Keep/KeepOne";
import KeepTwo from "./Keep/KeepTwo";
//引入
import {shallowRef,ref,reactive} from 'vue';
export default{
   name:"BodyContent",
   setup() {
     let list=reactive({
         a:1,
         b:{
             c:2
         }
     });
     let change=()=>{
         list.a=3;
         list.b.c=4;
     }
     let msg={
         login:"没有账号，请注册",
         singo:"已有帐号，登录",
     };
     let msginfo=ref(msg.login);
     console.log(msginfo);

     let handle=()=>{
         if(msginfo.value==msg.login)
         {
             msginfo.value=msg.singo;
         }
         else{
             msginfo.value=msg.login;
         }
     }
     let data=shallowRef({
         componentId:KeepOne,
     });  
     let changeStatus=(args)=>{
           data.value={componentId:args?KeepOne:KeepTwo};
           //shallowRef方法监听的是value属性的变化，而不是属性值的变化
           console.log(data);
     };
     return {data, changeStatus,msginfo,handle,list,change};
   },
   //生命周期挂载完成
   mounted() {
       console.log(this);//this指向当前组件
   },
}

2.异步组件

• 异步挂载组件，其实使用的是promise、async、await。
• 分为全局挂载和局部挂载

(1) 全局异步挂载

方案1

import { createApp,defineAsyncComponent } from 'vue'
//异步挂载
import Logo from './components/common/Logo';
//defineAsyncComponent方法是3.0提供的异步挂载全局组件的方案
let asyncCom=defineAsyncComponent(()=>new >Promise((resolve,reject)=>{
   //写计时器
   setTimeout(()=>{
       resolve(Logo);
   },1000);
}));
Vue.component('v-logo',asyncCom);

方案2

let asyncCom=defineAsyncComponent(()=>new >Promise((resolve,reject)=>{
   //require告诉webpack去异步加载组件
   requestAnimationFrame(['./components/common/Logo'],resolve);
}));
Vue.component('v-logo',asyncCom);

方案3(最常用)

//vue3.0全局注册组件异步另一个方案
//纯异步加载
let asyncCom=defineAsyncComponent(()=>import('./components/common/Logo'));
Vue.component('v-logo',asyncCom);

(2)局部异步挂载

import { defineAsyncComponent } from 'vue'
//局部的异步挂载
export default{
   name:"asyncInfo",
   components:{
       //vue2.0写法
       //'v-alert':()=>import("./common/Alert")//2.x已经失效
       'v-alert':defineAsyncComponent(()=>import("./common/Alert"))
   }
}

3.加载异步组件时处理组件的加载状态

import { defineAsyncComponent } from 'vue'
import load from './common/loading'
import error from './common/error'
export default{
       //加载异步组件时处理组件的加载状态
       'v-msg':defineAsyncComponent({
           loader:()=>{
               let a=new Promise((resolve)=>{
                   setTimeout(()=>{
                       resolve(import('./common/Alert'));
                   },2000)
               });
               return a;
           },
           //异步加载时使用的组件
           loadingComponent:load,
           //加载失败时使用的组件
           errorComponent:error,
           //展示加载时组件的延时时间。默认值是 200 (毫秒)
           delay:200,
           //如果提供了超时时间且组件加载也超时了，则使用加载失败时使用的组件。默认值是：`Infinity`
           timeout:5000,
           //组件是否挂起
           suspensible:false
       })
   }
}