Vue。js是开源的一个前端开发库,通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue。js在近年来受到一定程度的关注,目前在GitHub上已经有5000 +。
本文是笔者在开发实践中踩过的坑,总结和分享出来,希望对大家学习Vue有所帮助。下面来看看详细的介绍:
v)遍历数组中存在空值导致页面报错,情况如下:
开发框架是以Vue为模型绑定的核心,根据错误可以进行一个简单的判断:
,,,,,& # 9642;removeChild操作既然不是发生在开发者显示书写的代码中,就应该是模型销毁后Vue引擎移除dom节点导致的。
,,,,,& # 9642;错误栈信息都在框架的代码之内,此操作不可能是有用户代码触发导致的。
开发者某一流程的操作,会100%稳定地触发出这一错误,此错误导致js执行终端,整个程序陷入瘫痪无法工作,开发者的操作流程可以简化为如下的步骤:
,,,,,1. 访问视图a .
,,,,,2. 访问视图b
,,,,,3.回退历史记录到a .(错误发生在这里)
以上的跳转关系都是视图跳转,也就是发生在路由系统之内的路由跳转,按照路由逻辑,第三步的时候会依次执行视图的声明周期函数,包括:
,,,,,& # 9642;B视图的unRender逻辑,包括beforeUnRender和afterUnRender。
,,,,,& # 9642;一个视图的渲染,包括beforeRender和afterRender。
开发者只在beforeRender的阶段进行了模型重置的操作,几乎可以确定无疑,报错就是由这几行模型重置和赋值的操作引起的。层层排除可以寻找到使用简单代码重新此问题的方式。
准备一个简单的空工程,新建视图测试,一下的代码分别为js/视图/. js和html/视图/test.html js/视图/. js中视图对模型的操作可以完整反映重现此问题的流程,其中,setTimeout模拟的是ajax操作以让数据在多个蜱虫之后设置到模型以观察Vue对dom节点的创建和销毁。
<代码>美元nextTick 之后,将test_arr置空的操作是为了使vue将此数据对应的dom节点销毁,对应代码如下:
以上的代码可以稳定重新问题,下面是解题思路。
在不求甚解的状态下,这个问题是比较容易解决的,这里有几个临时的解决方案。
<强>▲方案一
从报错信息<代码>未捕获TypeError:无法读取属性的removeChild零>
修改Vue框架代码,将这里的代码:
修改为:
<强>▲方案二
深入地分析,为什么<代码> el.parentNode> that.model。test_arr=["”、“4”,“”,“5”、“6”、“”) 这段代码设置发生后,v代表产生的dom节点之后3个,而不是5个,这种情况下<代码> el.parentNode>
<强>▲方案三
问题并不算是圆满解决,正常的情况下框架应该具有鲁棒性、适应不同的使用场景,不应该出现js报错的问题,所以还有深入研究下去的必要。
在Vue中针对v代表指令有一个跟踪,的可选配置:
,,,,,,& # 9642;无跟踪,情况:数据修改时,无论值是否被修改,dom都被重新渲染。
,,,,,,& # 9642;有跟踪,情况:数据修改时,不变数据所在dom的不被重新渲染,已改变的数据所在dom才被重新渲染。
