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

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

问题：两个页面都含有id为test的div元素，内容不同。在路由切换的时候，document.getElementById('test')获取的是原页面的值。

代码：// 页面1aaa

// 页面2bbb

路由切换示例：javascripttransiti

问题

两个界面都有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。