vue中动态组件和异步组件

......
<script>
    /* 
      动态组件：

      动态组件语法--固定组件名 component,会接收is属性参数，由is属性对应的值判断显示哪个组件
      动态组件--根据数据的变化，结合component标签，来随时动态切换组件的显示
      keep-alive -- 缓存标签
      动态组件和keep-alive一般会一起使用
      
      异步组件：异步执行某些组件的逻辑
      暂时掌握其语法即可
     */

    const app = Vue.createApp({
      template: `
           <keep-alive>
            <component :is='currentItem'/>
           </keep-alive>
           <br/>
           测试
           <button @click='handleClick'>切换</button>
           <br/>
           <async-common-item/>
         `,
      data() {
        return {
          currentItem:'input-item'
        }
      },
      methods: {
        handleClick() {
          this.currentItem = this.currentItem==='input-item'?'common-item':'input-item'
        }
      }
    })
    app.component('input-item',{
      data(){
        return{
        }
      },
      template:`
        <div>
           <input/>
        </div>
      `,
      methods:{
        handleClick(){
          console.log('测试中')
        }
      }
    })
    app.component('common-item',{
      data(){
        return{
        }
      },
      template:`
        <div>
           <div>common-item</div>
        </div>
      `,
      methods:{
        handleClick(){
          console.log('测试中')
        }
      }
    })
    /* 注册异步组件 */
    app.component('async-common-item',Vue.defineAsyncComponent(()=>{
      return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve({
                  template:'<div>异步成功</div>'
                })
            },4000)
      })
    }))
    /* 注意：使用组件时需要先注册完组件再将该vue实例挂载到root元素上 */
    /* vm代表的就是vue应用的根组件 
       vm获取根节点上数据，调用data时，data前加一个$,操作vm时，数据改变，视图也会自动发生改变
       如果该数据是根数据，也可以直接vm. 调用
       */
    const vm = app.mount('#root')
     //app.unmount()//让vue失效
  </script>
......