Vue.js中轻松解决v-for执行出错的三个方案


Posted in Javascript onJune 09, 2017

前言

Vue.js 是开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中,Vue.js在近年来受到一定程度的关注,目前在 GitHub上已经有5000+。

本文是笔者在开发实践中踩过的坑,总结和分享出来,希望对大家学习Vue有所帮助。下面来看看详细的介绍:

【问题描述】

v-for遍历数组中存在空值导致页面报错,情况如下:

Vue.js中轻松解决v-for执行出错的三个方案

开发框架是以Vue为模型绑定的核心,根据错误可以进行一个简单的判断:

      ▪ removeChild操作既然不是发生在开发者显示书写的代码中,就应该是模型销毁后Vue引擎移除dom节点导致的。

      ▪ 错误栈信息都在框架的代码之内,此操作不可能是有用户代码触发导致的。

开发者某一流程的操作,会100%稳定地触发出这一错误,此错误导致js执行终端,整个程序陷入瘫痪无法工作,开发者的操作流程可以简化为如下的步骤:

      1. 访问视图A。

      2. 访问视图B。

      3. 回退历史记录到A。(错误发生在这里)

以上的跳转关系都是视图跳转,也就是发生在路由系统之内的路由跳转,按照路由逻辑,第三步的时候会依次执行视图的声明周期函数,包括:

      ▪ B视图的unRender逻辑,包括beforeUnRender和afterUnRender。

      ▪ A视图的Render,包括beforeRender和afterRender。

开发者只在beforeRender的阶段进行了模型重置的操作,几乎可以确定无疑,报错就是由这几行模型重置和赋值的操作引起的。层层排除可以寻找到使用简单代码重新此问题的方式。

【重现方式】

准备一个简单的空工程,新建视图test,一下的代码分别为js/view/test.js和html/view/test.html,js/view/test.js中视图对模型的操作可以完整反映重现此问题的流程。其中,setTimeout模拟的是ajax操作以让数据在多个tick之后设置到模型以观察Vue对dom节点的创建和销毁。

$nextTick之后,将test_arr置空的操作是为了使vue将此数据对应的dom节点销毁,对应代码如下:

Vue.js中轻松解决v-for执行出错的三个方案

以上的代码可以稳定重新问题,下面是解题思路。

【解决方案】

在不求甚解的状态下,这个问题是比较容易解决的,这里有几个临时的解决方案。

▲方案一

从报错信息Uncaught TypeError: Cannot read property 'removeChild' of null可知,之所以发生这个问题是因为在null的对象上执行了removeChild。

修改Vue框架代码,将这里的代码:

Vue.js中轻松解决v-for执行出错的三个方案

修改为:

Vue.js中轻松解决v-for执行出错的三个方案

▲方案二

深入地分析,为什么el.parentNode会是null,通过上面重现的步骤发现,当that.model.test_arr = ["","4","","5","6",""]这段代码设置发生后,v-for产生的dom节点之后3个,而不是5个,这种情况下el.parentNode就是不存在的,所以产生了第二种解决方案,强制不给空数据的元素生成dom节点。

Vue.js中轻松解决v-for执行出错的三个方案

▲方案三

问题并不算是圆满解决,正常的情况下框架应该具有鲁棒性,适应不同的使用场景,不应该出现js报错的问题,所以还有深入研究下去的必要。

在Vue中针对v-for指令有一个track-by的可选配置:

       ▪无track-by情况:数据修改时,无论值是否被修改,dom都被重新渲染。

       ▪有track-by情况:数据修改时,不变数据所在的dom不被重新渲染,已改变的数据所在dom才被重新渲染。

因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度,这可能导致重新渲染整个列表。但是,如果每个对象都有一个唯一 ID 的属性,便可以使用 track-by 特性给 Vue 一个提示,Vue因而能尽可能地复用已有实例。所以就有了第三种解决方案。

Vue.js中轻松解决v-for执行出错的三个方案

【原因分析】

v-for遍历数组中存在空值导致页面报错,主要是遍历条件里对值的判断有问题。Vue为了保证对dom节点的复用,内置了一份按照id存取的dom缓存,通过对数据分析出dom_id,然后根据此id从缓存中获取dom节点。由于不同的数据取到了相同的dom_id,所以没有创建dom节点出来。但是,在最终数组置空,模型变更之后dom节点移除的时候却为这些dom节点触发了remove操作,也就是方案一中兼容的那些代码:

Vue.js中轻松解决v-for执行出错的三个方案

所以问题必定出现在getTrackByKey这个函数的执行上,以下是getTrackByKey的代码:

Vue.js中轻松解决v-for执行出错的三个方案

Vue中对数据绑定的操作大大地提高了开发者应用开发的效率,但与此同时也伴随着一些不易察觉的问题,尤其如本文中问题的重现条件比较复杂的情况下,测试不一定可以覆盖到问题的触发条件,这个时候就需要开发人员多一分警惕。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
Position属性之relative用法
Dec 14 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
vue实现购物车加减
May 30 Javascript
node.js中cluster的使用教程
Jun 09 #Javascript
vue bootstrap小例子一枚
Jun 09 #Javascript
详解webpack解惑:require的五种用法
Jun 09 #Javascript
Bootstrap输入框组件使用详解
Jun 09 #Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 #jQuery
微信分享调用jssdk实例
Jun 08 #Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 #Javascript
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
浅谈对yield的初步理解
2017/05/29 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
请解释流与文件有什么不同
2016/07/29 面试题
幼儿园老师辞职信
2014/01/20 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python