Vue 如何实现头像组件缓存?

  • Z时代
  • 2024-03-14
  • 分类：IT

Vue 如何实现组件缓存?

版本：vue2
如存在一个头像组件，会被反复渲染使用。

头像组件内部：

会通过 props.user 传递的用户信息，异步获取用户头像并更新 data.show_url 来实现头像显示。
在获取到用户的头像前，展示的都是默认头像。

组件外部，父组件:

在一个列表中渲染N个头像组件，会出现几百个同样内容头像组件，但每个头像组件都会重新渲染。
即肉眼会看到头像从默认变为用户头像，然后拖动列表时频繁闪烁。

源码参考

头像组件大概实现如下：

<template>
    <img :src="show_url" v-if="show_url" />
    <img src="@/assets/logo.jpg" v-else />
</template>
<script>
export default {
    props: {
        user: {
            avatar: "",
            id: 0
        },
    },
    data() {
        return {
            show_url: "",
        }
    },
    methods: {
        async loadImage(userId) {
            this.show_url = await getLocalAvatarURL(userId) // 下载网络资源并存储为本地资源
        },
    },
    created() {
        if (this.user.id != "" && parseInt(this.user.id) > 0) {
            this.loadImage(this.user.id, this.user.avatar)
        }
    },
    watch: {
        "user.id":function (newVal) {
            const userId = newVal
            if (userId != "" && parseInt(userId) > 0) {
                this.loadImage(userId, this.user.avatar)
            }
        },
    },
}
</script>

父组件伪代码：

<template>
    <div v-for="item in users">
        <UserAvatar :user="item.user"></UserAvatar>
    </div>
</template>

能否实现同一内容的组件被内部缓存，展示时不再闪烁？

我尝试 <keep-alive> 加在父组件中，貌似是不太符合我的场景的，没有成功。
我能够想到的解决办法，那就是在父组件中，获取 users 数据前就把头像等资源拿到，这样渲染不会有闪烁。
但是这样感觉逻辑没有拆分开，会不会不太好？标准的做法是什么？非专业前端求助~

回答：

把 show_url 的值缓存了就可以，目前主要是请求是异步的。可以使用 store 或者直接赋值回去。

keep-alive 应该也可以，但是我 这边遍历的好使不 没试过好使不好使，需要注意绑定 key

<template>
    <div v-for="item in users">
       <keep-alive>
           <UserAvatar :user="item.user" :key="item.id"></UserAvatar>
       </keep-alive>
    </div>
</template>

以上是 Vue 如何实现头像组件缓存? 的全部内容， 来源链接： utcz.com/p/932978.html

回到顶部