Vue.js中v-if切换后如何访问已移除的DOM元素？

这个问题我之前做项目时也碰到过，核心原因是v-if是真正地销毁和创建DOM元素——当条件不满足时，对应的div会被完全从DOM树里移除，所以你在第三个div显示时，根本找不到前两个div的痕迹，自然没法访问。

下面给你几个可行的解决方案，你可以根据自己的场景选择：

方案1：用v-show替代v-if #

如果你的场景允许，直接把v-if换成v-show就可以解决问题。v-show只是通过CSS的display: none来隐藏元素，DOM元素本身一直存在于页面中，只是不可见而已。

修改后的代码：

<div v-show="page=='main'" key="1"> x </div>
<div v-show="page=='about'" key="2"> y </div>
<div v-show="page=='contact'" key="3"> z </div>

不过要注意，v-show的初始渲染成本会比v-if高一点（因为所有元素都会被创建），但切换成本很低，适合需要频繁切换显示状态的场景。

方案2：用keep-alive缓存组件实例（如果是组件/需要保留状态） #

如果这几个div里是Vue组件，或者你需要保留元素的状态，可以用<keep-alive>标签包裹它们。keep-alive会缓存被v-if隐藏的组件实例，即使DOM被销毁，组件的实例和状态依然保留，你可以通过ref来访问它们。

示例代码：

<keep-alive>
  <div v-if="page=='main'" key="1" ref="mainSection"> x </div>
  <div v-if="page=='about'" key="2" ref="aboutSection"> y </div>
  <div v-if="page=='contact'" key="3" ref="contactSection"> z </div>
</keep-alive>

之后你就可以在Vue实例里通过this.$refs.mainSection来访问第一个div，哪怕它当前是隐藏状态。

方案3：把需要访问的数据存到Vue实例的data中 #

如果你不需要直接操作DOM元素，只是需要获取div里的内容或状态，那最好的方式是把这些数据抽离到Vue的data里，而不是依赖DOM。

比如：

export default {
  data() {
    return {
      page: 'main',
      sectionContents: {
        main: 'x',
        about: 'y',
        contact: 'z'
      }
    }
  }
}

然后模板里可以这样写：

<div v-if="page=='main'" key="1">{{ sectionContents.main }}</div>
<div v-if="page=='about'" key="2">{{ sectionContents.about }}</div>
<div v-if="page=='contact'" key="3">{{ sectionContents.contact }}</div>

这样不管哪个div显示，你都能直接通过this.sectionContents.main或this.sectionContents.about获取到对应的内容，完全不需要操作DOM。

内容的提问来源于stack exchange，提问作者T.Todua