关于原生js重复获取标签问题

这是我之前写的代码:

const vpHome = document.querySelector('.VPHome');;

// 更换背景图
function changeBackground() {
  // 如果是主页就可以换背景图片,挺对的嘛!
  if (vpHome) { 
    vpHome.style.setProperty('--bg-image', images[currentIndex]);
    currentIndex = (currentIndex + 1) % images.length; // 循环索引
  }
}

然后就是遇到的问题:只有第一次进入主页才有这个换背景功能

跟个憨憨一样到处搜setProperty为什么不生效,还跟AI聊了2小时天,是真的蠢。

根源:Vue组件在页面切换时候重新从虚拟DOM转真实DOM,每次回到主页都得重新获取。（改了半天压根不是一个对象,就跟*了半天结果是个男的一样令人伤心好像还挺兴奋?）

解决办法:

let vpHome;

// 更换背景图
function changeBackground() {
  vpHome = document.querySelector('.VPHome'); // 在里面获取
  if (vpHome) {
    vpHome.style.setProperty('--bg-image', images[currentIndex]);
    currentIndex = (currentIndex + 1) % images.length; // 循环索引
  }
}