vue3切换el-scrollbar组件重复渲染历史数据

最近在写一个vue3的网页，是关于用户创建和展示博客内容的。

其中有一个功能，是个人主页两个切换按钮，可以切换到自己创建的博客以及点过赞的博客。大概长这样：

逻辑其实很简单，myBlogs和MyLikeBlogs分别加载不同的Blog对象数组，那么创建一个响应式变量myBlogs，并为按钮赋予响应事件改变这个变量的值即可。

但是如果简单地使用下面这个代码，在反复点击切换组件按钮时就会出现和原始数据堆叠的可怕现象）

// 控制显示的博客内容
const currentBlogs = ref(myBlogs); // 默认显示我的博客

// 切换为我的博客
const showMyBlogs = () => {
  currentBlogs.value = myBlogs;
};

// 切换为我喜欢的博客
const showMyLikeBlogs = () => {
  currentBlogs.value = myLikeBlogs;
};

Template部分：

<ScrollerBlogs :blogs="currentBlogs" />

灾难如下：

在两个按钮反复点击，会发现相同的scroller item多次渲染！与之前渲染过的item重复，但是我们想要的是重新加载数据。

这个时候需要加一个key，key 的作用是：当 key 发生变化时，Vue 会认为是不同的组件实例，并销毁旧的组件，创建新的组件。这就保证了每次切换时，组件会完全重新渲染，而不是保留之前的内容。

<ScrollerBlogs :key="currentBlogsKey" :blogs="currentBlogs" />

并且在每次切换组件的时候让key递增，使得每次切换组件时key都不一样。

// 控制显示的博客内容
const currentBlogs = ref(myBlogs); // 默认显示我的博客
const currentBlogsKey = ref(0);

// 切换为我的博客
const showMyBlogs = () => {
  currentBlogs.value = myBlogs;
  currentBlogsKey.value++;
};

// 切换为我喜欢的博客
const showMyLikeBlogs = () => {
  currentBlogs.value = myLikeBlogs;
  currentBlogsKey.value++;
};

这样一来，每次点击切换按钮的时候都会销毁之前渲染的数据，并重新加载Blog对象数组

完美解决

---

记录如上