关于javascript:Vue3的动态组件和异步组价

明天小编在网上晃荡的时候，发现前端这几年的倒退离不开组件的概念，之前小编接触到的组件，根本都是这样的

const app= Vue.createApp({
    template: `
    <input-item />
    <common-item />
        `
})

app.component('input-item',{
    template: `<div>
            <input />
        </div>`
})

app.component('common-item',{
    template: `<div>
            Hello World
        </div>`
})
const vm = app.mount("#root")

这个时候页面显示的一个文本框，一行文字，这个时候，如果咱们想通过一个按钮，来切换两个元素的事实和暗藏关系，就能够把代码批改成这样

const app= Vue.createApp({data(){
        return {currentItem: 'input-item'}
    },
    methods:{handleClick(){if(this.currentItem === 'input-item'){this.currentItem = 'common-item'}else{this.currentItem = 'input-item'}
            // 也能够通过三目运算符来实现。还能够借鉴绑定 class 或者 style 绑定
            // this.currentItem = this.currentItem === 'input-item'?'common-item':'input-item'
        }
    },
    template: `
    <input-item v-show="currentItem ==='input-item'" />
    <common-item v-show="currentItem ==='common-item'" />
    <button @click="handleClick"> 切换 </button>
        `
})

app.component('input-item',{
    template: `<div>
            <input />
        </div>`
})

app.component('common-item',{
    template: `<div>
            Hello World
        </div>`
})
const vm = app.mount("#root")

有了动静组件之后，同样的需要，咱们的代码就能够写成这样

// 动静组件：依据数据的变动，联合 component 这个标签，来随时动静切换组件的实现
const app= Vue.createApp({data(){
        return {currentItem: 'input-item'}
    },
    methods:{handleClick(){if(this.currentItem === 'input-item'){this.currentItem = 'common-item'}else{this.currentItem = 'input-item'}
        }
    },
    template: `
    // 为了缓存文本框之前的数据
    <keep-alive>
        <component :is="currentItem" />
    </keep-alive>
    <button @click="handleClick"> 切换 </button>
        `
})

app.component('input-item',{
    template: `<div>
            <input />
        </div>`
})

app.component('common-item',{
    template: `<div>
            Hello World
        </div>`
})
const vm = app.mount("#root")

在小编的第一块代码中，都是引入自定义标签的组件之后，就能够间接展现成果，这种成为同步组件，当然还有异步组件，次要是为了解决首屏加载速度的问题，借助 Vue3 中的 defineAsyncComponent，就像这样

const AsyncCommonItem = Vue.defineAsyncComponent(() => {return new Promise((resolve,reject) => {setTimeout(() => {
            resolve({template:'<div>this is an async component</div>'})
        },4000)
    })
})
const app= Vue.createApp({
    template: `
        <div>
            <common-item />
            <async-common-item />
        </div>
        `
})

app.component('common-item',{
    template: `<div>
            Hello World
        </div>`
})

app.component('async-common-item',AsyncCommonItem)

const vm = app.mount("#root")

当然，明天小编还为大家筹备了一些其余罕用的知识点，就当是饭后甜点吧
一、ref：获取 DOM 节点用的语法，慎用这种办法，前期保护的时候会很麻烦

const app= Vue.createApp({data(){
        return {count: 1}
    },
    mounted(){ // 只有早这个生命周期或者之后，将元素挂载上，才存在 DOM 的概念
        console.log(this.$refs.countele)  // <div>1</div>
        this.$refs.commele.sayHello()},
    template: `
        <div @click="count += 1">
            <div ref="countele">{{count}}</div>
            <common-item ref='commele' />
        </div>
        `
})

app.component('common-item',{
    methods:{sayHello(){alert('hello')
        }
    },
    template: `<div>
            Hello World
        </div>`
})

const vm = app.mount("#root")

二、privide inject：用于组件与子组件的子组件传递数据的形式

咱们在通过组件向子组件的子组件传递数据的时候，能够这样

const app= Vue.createApp({data(){
        return {count: 1}
    },
    template: `
        <div>
            <child :count="count"/>
        </div>
        `
})

app.component('child',{props:['count'],
    template: `<div>
            <child-child :count="count" />
        </div>`
})


app.component('child-child',{props:['count'],
    template: `<div>
            {{count}}
        </div>`
})
const vm = app.mount("#root")

显然，这样很麻烦，通过 privide inject，咱们能够这么写

const app= Vue.createApp({data(){
        return {count: 1}
    },
    // provide:{ // 不能间接调用 data 中的数据，须要的时候，须要写成函数的形式
    //     count:1
    // },
    // 这种是一次性的，能够通过 Vue3 的 getter 形式响应式，通过传统 props 一层层传递是能够
    provide(){
        return {count: this.count}
    },
    template: `
        <div>
            <child />
            <button @click="count += 1"> 减少 </button>
        </div>
        `
})

app.component('child',{
    template: `<div>
            <child-child />
        </div>`
})


app.component('child-child',{inject:['count'],
    template: `<div>
            {{count}}
        </div>`
})
const vm = app.mount("#root")

大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈