今天小编就为大家分享一篇解决vue中虚拟dom,无法实时更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10w dom节点,是极其耗费时间的,那我的Macbook air举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的 我们可以用虚拟列表解决这个问题 一步步来 首先看一下效果 这是data中的数据 data() { return { list: [], // 贼大的数组 li: { // 列表项信息

现象： 使用Element UI渲染了一个树形结构，设计在鼠标移入每个节点是显示其中的操作按钮，效果如下： 下面是出错部分： 在新增节点后移入新增节点附近(图中是移入一级2)，功能按钮的显示位置出现偏移 原因查找： 经过调试发现是在新增节点后，执行DOM操作获取节点时，取到的仍是之前的结构，新增的节点并未获取到。 原因分析： 猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取。 解决方法： 使用Vue.nextTick，看下官方材料： ‘

碰到的问题：使用jq获取元素节点的个数时一直为0 解决方法：使用vue的nextTick()函数即可解决 原理：nextTick可以在下一次更新dom之后进行回调，我的问题在于，在页面加载完成时无法获取虚拟dom，而使用回调函数后就可以获取到正确的dom数量，所以只需要在nextTick函数中执行jq函数就可以正确获取了。 self.$nextTick(function () { // DOM 更新了 $(#myCarousel).carousel(0); }) 以上这篇解决vue中虚拟