Vue中用getElementById()获取的值为何总是原始值而非响应式？

本文共计596个文字，预计阅读时间需要3分钟。

问题：页面中两个都有id=test的div元素，内容不同，路由切换时document.getElementById('test')获取的是原界面的值。代码：// 页面1aaa

// 页面2bbb

// 路由切换transiti

问题

两个界面都有id="test"的div，内容不同，路由切换的时候document.getElementById()拿到的是原界面的值。

问题代码

// 页面1 <div id="test">aaa</div> // 页面2 <div id="test">bbb</div> // 路由切换如下： <transition name="card-fade"> <router-view/> </transition> .card-fade-enter-active { animation: bounce-in 2s; }

现象

从页面1跳转到页面2时，document.getElementById(‘test')，始终拿到的是aaa。

反之从页面2跳到页面1时，document.getElementById(‘test')，始终拿到的是bbb。