18910140161

Vue3 insertBefore报错

顺晟科技

2022-09-03 12:41:26

357

现象:更新上图中的p标签时出现了问题


顺晟科技:

实际也发现,n1.el确实为空

在这个操作中,el即为一步步传入到后面几个操作的parent(中间形参叫container)

在实际实践中,发现,通过给找不到自身el的vnode的el加上ref标签,可以使vnode能够找到自己的标签。

首先看到,问题的引起原因在于,parent这个参数为null

向上追查后,发现parent为空是因为它的数据源为空,其具体位置在从上往下树的第一个patchElement操作里,如下图

总结下来,vue3在更新图上的p标签时,vnode无法找到自己所关联的html节点,导致实际无法插入

解决方案:

但上面方法存在缺陷,因为无法预计什么样的情况下,会出现无法找到自身el的情况

(PS:由于我是新用户,用不了那么多图片,有一些补充描述可以看以下链接:http://note.youdao.com/noteshare?id=5866ec0820d8fdf0c28923204adaf285)

问题流程:

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航