解决vue页面DOM操作不生效的问题

Posted 2023-04-18

参考技术A 现象：
使用Element
UI渲染了一个树形结构，设计在鼠标移入每个节点是显示其中的操作按钮，效果如下：
下面是出错部分：
在新增节点后移入新增节点附近(图中是移入一级2)，功能按钮的显示位置出现偏移
原因查找：
经过调试发现是在新增节点后，执行DOM操作获取节点时，取到的仍是之前的结构，新增的节点并未获取到。
原因分析：
猜测是vue使用的虚拟DOM，使得页面虽然已经渲染出来，但在Vue实例中让处在在虚拟DOM中，无法获取。
解决方法：
使用Vue.nextTick，看下官方材料：
‘在下次
DOM
更新循环结束之后执行延迟回调'，这句话不是特别理解，不过可以看出DOM更新是一个循环的过程，在过程结束之前无法获取到真实的DOM元素(至于这个循环是多久，还在探索中)。而将DOM操作放在nextTick中操作便可以获取到更新后的DOM。
结果：
依据上述原理，将DOM操作的函数在更新数据后在nextTick里调用，实现了理想中的效果。
以上这篇解决vue页面DOM操作不生效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue指令以及dom操作详解

Vue数组操作不刷新视图问题的解决

最近使用Vue2.0开发项目，有一个列表使用v-for绑定到数组，按照Vue的推荐方案，使用push、splice、this.$set三个变异方法操作数组。发现在添加页面，三个方法都能及时刷新视图；但是在修改页面，只有this.$set方法修改数组元素能刷新，其他两个方法死活不刷新视图，使用Vue-devtools查看，数据都能成功修改。

尝试了在mount阶段就用push方法一个个添加，尝试把用到的对象都显示定义字段属性，尝试百度到的N种方法...花了四五个小时，都不行！但问题肯定是出在没有触发Vue刷新视图的条件上。

最终模拟了一个手工强制刷新的办法：

1、html中增加一个hidden，绑定到一个flag字段：

2、mount阶段给flag赋初值：

3、在push和splice后，修改flag的值！！！

思路：由于flag是简单字段，它的变化肯定要刷新视图，所以通过flag的变化，手工刷新视图。

          由此可见，Vue的视图刷新是整体刷新，而不是只刷新变化的字段。