likes
comments
collection
share

动态组件和异步组件

作者站长头像
站长
· 阅读数 45

动态组件

如果现在有这样一个需求：

页面中有2个DOM元素，如果一个展示，那么另外一个就隐藏

使用动态组件前

const app = Vue.createApp({
    data() {
        return {
            currentItem: 'input-item'
        }
    },
    methods: {
        handleClick() {
            this.currentItem === 'input-item' ? this.currentItem = 'common-item' : this.currentItem = 'input-item'
        }
    },
    template: `
    <div>
        <input-item v-show="currentItem === 'input-item'"/>
        <common-item v-show="currentItem === 'common-item'"/>
        <button @click="handleClick">切换</button>
    </div>
    `
})
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() {
            this.currentItem === 'input-item' ? this.currentItem = 'common-item' : this.currentItem = 'input-item'
        }
    },
    template: `
    <div>
        <component :is="currentItem"/>
        <button @click="handleClick">切换</button>
    </div>
    `
})
app.component('input-item', {
    template: `
      <div>
        <input/>
      </div>
    `
})
app.component('common-item', {
    template: `
      <div>
       Hello world
      </div>
    `
})
const vm = app.mount('#root')

我们不妨来看下：

<component :is="currentItem"/>

这句话的意思，就是要在这个地方显示一个组件，这个组件显示的内容是由currentItem决定的，如果currentItem='input-item'那么就展示组件<input-item/>,如果currentItem='common-item'那么就展示<common-item/>

这就是动态组件的作用，当我们想做多个组件之间切换的时候，直接通过data中的变量就可以控制想展示哪一个组件

动态组件：根据数据的变化，结合component这个标签和:is属性(绑定数据)，来随时动态的在多个组件之间指定切换显示哪个组件

keep-alive 缓存

上面使用动态组件存在的一个问题：

如果我们在组件<input-item/>中的input输入框中输入内容，然后切换另外一个组件<common-item/>后，那么之前在input输入框中输入内容就会丢失

动态组件和异步组件

动态组件和异步组件

动态组件和异步组件

如果要解决这个问题就需要使用<keep-alive></keep-alive>这样一个添加缓存的标签，包裹住动态组件

const app = Vue.createApp({
    data() {
        return {
            currentItem: 'input-item'
        }
    },
    methods: {
        handleClick() {
            this.currentItem === 'input-item' ? this.currentItem = 'common-item' : this.currentItem = 'input-item'
        }
    },
    template: `
    <div>
        <keep-alive>
            <component :is="currentItem"/>
        </keep-alive>
        <button @click="handleClick">切换</button>
    </div>
    `
})
app.component('input-item', {
    template: `
      <div>
        <input/>
      </div>
    `
})
app.component('common-item', {
    template: `
      <div>
       Hello world
      </div>
    `
})
const vm = app.mount('#root')

这样我们在组件<input-item/>中的input输入框中输入内容，然后切换另外一个组件<common-item/>后，那么之前在input输入框中输入内容就会被保存下来

<keep-alive>
  <component :is="currentItem"/>
</keep-alive>

keep-alive的作用

当动态组件第一次渲染的时候，会把组件中输入的状态、变更的情况都添加到缓存中，当再次调用这个组件的时候，会将缓存中的数据拿过来填充进去，因此keep-alive有缓存的机制，并且keep-alive一般会和动态组件结合使用

异步组件

异步组件：是异步执行某些组件的逻辑

1.同步组件

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

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

上面的组件<common-item/>就是一个同步组件，因为调用这个组件的时候，组件就会被立即按顺序执行

2.异步组件

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

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

动态组件和异步组件

组件<async-common-item/>的内容并不会被立即展示，而是一个异步的过程 。4秒后触发Promise，并且在resolve中的参数中配置组件展示的内容

异步组件的作用：

我们可以通过异步的方式动态的加载一些其他的组件，这样的好处就是可以把大型的项目拆分成很多小的JS文件/组件，在需要用到这些小的JS文件/组件的时候，通过异步组件再引入这些小的JS文件/组件，再去使用这些JS文件/组件，这样可以把大型项目的代码拆分成很多小的代码片段，最终再把这些小的代码片段组合成大型的项目

定义异步组件的方式：

Vue.defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                template: `<div>this is an async component</div>`
            })
        }, 4000);

    })
}))

查缺补漏

v-once

让某个元素标签只渲染一次，即使是后面数据发生变化，DOM内容也不再发生变化

 const app = Vue.createApp({
    data(){
        return {
            count: 1
        }
    },
    template: `
    <div @click="count += 1" v-once>
        {{count}}
    </div>
    `
})
const vm = app.mount('#root')

动态组件和异步组件

点击count的时候，已经不再自增,即使数据已经发生了变化，但是页面中的内容已经不跟随数据的变化而变化展示了

ref

ref是一个获取DOM节点或者组件引用的一个语法

1. 获取DOM节点

获取模板标签对应的真正的DOM节点，比如在做轮播的时候

const app = Vue.createApp({
    data(){
        return {
            count: 1
        }
    },
    mounted() {
        console.log(this.$refs.count);
    },
    template: `
    <div>
        <div ref="count">
            {{count}}
        </div>
    </div>
    `
})
const vm = app.mount('#root')

动态组件和异步组件

通过this.$refs.count.innerHTML = 'hello'这种方式去操作DOM

不到万不得已，尽量不要去操作DOM

2. 获取组件的引用

父组件通过在组件上使用ref获取到子组件的引用，再去使用组件的引用上的方法等操作

 const app = Vue.createApp({
    mounted() {
        this.$refs.common.sayHello()
    },
    template: `
    <div>
        <common-item ref="common"/>
    </div>
    `
})
app.component('common-item', {
    methods:{
        sayHello() {
            alert('hello')
        }
    },
    template: `
      <div>
         Hello world
      </div>
    `
})
const vm = app.mount('#root')

慎重使用，可维护性不高

provide / inject

涉及多层组件传值可以使用provide / inject组合来传值，provide提供数据，inject使用数据

使用 provide / inject 之前

父组件如果想将数据传给孙子组件，那么首先要通过在子组件上绑定动态属性将值传给子组件，接着子组件再通过绑定动态属性将值传给孙子组件，这样一层一层的传递下去...

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

使用 provide / inject 之后

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

父组件将要传递的给孙子组件的数据定义在provide:{xxx:yyy}中，由于是父组件直接传递给孙子组件，所以就不关子组件什么事了。孙子组件需要接收父组件传递过来的数据，就需要在inject:['xxx']中接收和使用这个属性中存的数据

const app = Vue.createApp({
    data() {
        return {
            count: 1
        }
    },
    provide() {
        return {
            count: this.count
        }
    },
    template: `
    <div>
        <child :count="count"/>
         <button @click="count += 1">自增</button>
    </div>
    `
})
app.component('child', {
    props:['count'],
    template: `
      <child-child :count="count">{{count}}</child-child>
    `
})
app.component('child-child', {
    inject:['count'],
    template: `
      <div>
         {{count}}
      </div>
    `
})
const vm = app.mount('#root')

运行结果

动态组件和异步组件

数据count已经发生变化了，但是DOM没有更新，这是因为使用privde提供数据给孙子组件是一次性的而不是一个双向绑定的数据，数据发生改变了，privde感知不到数据的变化，也就没有给孙子组件重新赋值，所以孙子组件中数据count永远是第一次传递的值

目前存在的问题是，这个provide中的数据和data中的数据并不是双向绑定的，后面的vue3语法会解决这个问题

转载自:https://juejin.cn/post/7239191802506461245
评论
请登录