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")

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