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

前言

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

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

【问题描述】

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节点销毁，对应代码如下：

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

【解决方案】

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

▲方案一

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

修改Vue框架代码，将这里的代码：

修改为：

▲方案二

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

▲方案三

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

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

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

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

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

【原因分析】

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

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

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

总结

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

赞 (0)

相关推荐

  • 详解Vue中使用v-for语句抛出错误的解决方案

    Vue 中使用v-for语句抛出错误的解决方案 今天在维护以前的项目的时候遇见了下面的报错情况,开始我以为是因为jQuery和Vue冲突了,所以把以前的jQuery改了,但是还是出现同样的错误-通过查阅资料,发现是因为循环的变量里面的值重复了,导致Vue报错. 复制代码 代码如下: Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null 接下来查了一下解决方案,发现在Vue 2.0之前的版本可以通过在

  • 详解vuejs之v-for列表渲染

    详解vuejs之v-for列表渲染

    Vue.js是一个构建数据驱动的web界面的库.重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单 如下列表展示,当我们从后端接口或者json文件使用ajax获取数据之后现实到页面,我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历填充 2.ng的ng-repeat 今天我们使用vue.js的v-for 一.html <div class="shop_list_box

  • Vue.js常用指令汇总（v-if、v-for等）

    Vue.js常用指令汇总（v-if、v-for等）

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu

  • vue.js指令v-for使用及索引获取

    vue.js指令v-for使用及索引获取

    1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <

  • Vue.js常用指令之循环使用v-for指令教程

    Vue.js常用指令之循环使用v-for指令教程

    前言 Vue.js中,v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. v-for 可以绑定数据到数组来渲染一个列表: <div id="wantuizhijia"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <sc

  • VUE中v-model和v-for指令详解

    VUE中v-model和v-for指令详解

    1.基本雏形 <!DOCTYPE html> <html> <head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue

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

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

    前言 Vue.js 是开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js在近年来受到一定程度的关注,目前在 GitHub上已经有5000+. 本文是笔者在开发实践中踩过的坑,总结和分享出来,希望对大家学习Vue有所帮助.下面来看看详细的介绍: [问题描述] v-for遍历数组中存在空值导致页面报错,情况如下: 开发框架是以Vue为模型绑定的核心,根据错误可以进行一个简单的判断: ▪ removeChild操作既然不是发生在开发者显示

  • 关于vue.js中实现方法内某些代码延时执行

    今天在工作时遇见了某些代码需要延时操作的情况.具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后,grid内数据能够及时更新以便显示增删改操作后的数据.这里的话使用的是vue.js中的setTimeout函数来解决该问题. 代码如下: var that = this; setTimeout(function () { that.modifyDialogVisible = false; grid.api.reloadData(); },500); 值得注意的是这

  • vue.js中使用微信扫一扫解决invalid signature问题(完美解决)

    1.点击按钮,实现微信扫一扫功能: <template> <a class="btn" @click="scan">扫一扫</a> </template> 2.使用config接口注入配置信息,wx.config调用方法如下: (其中appId,timestamp,nonceStr,signature必须从后台获取,传参当前网页的URL,不包含#及其后面部分,location.href.split('#')[0]获取)

  • 解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    先看效果图,这是弹窗效果,要求就是弹窗出现和消失时候不是很突兀,要有过渡效果. 首先看弹窗出现的实现思路,先加一个beforeActive类,再加一个active类.我们看审查元素,一开始display:none: 在beforeActive中display:block:只是background: transparent;然后在一定时间后再加上active类.问题就来了,在打开弹窗代码中,如下图,settimeout第二个参数小于60ms效果就会不稳定,有时候有过渡效果,有时候没有过渡效果. /

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法

    今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去官网上查了下资料,发现在vue2.0版本中,{{{}}}转换HTML的方式已经被废除,该版本中必须使用v-html标签进行转换,下面是具体的使用方法: <span v-html="htmlData"> {{htmlData}} </span> 总结 以上所述是小编给

  • 解析Vue.js中的组件

    介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

  • Vue.js中的高级面试题及答案

    Vue-loader 是 Webpack 的加载模块,它使我们可以用 Vue 文件格式编写单文件组件. 单文件组件文件有三个部分,(模板.脚本和样式). vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) 提取和处理每个人部分.该设置使我们可以使用 Vue 文件无缝编写程序. vue-loader 模块还允许把静态资源视为模块依赖性,并允许使用 webpack 加载器进行处理. 而且还允许还开发过程中进行热重装. 2.prop 如何指定其

  • 在vue项目中promise解决回调地狱和并发请求的问题

    场景需求: 需要同时请求5个接口 都请求成功后执行下一步操作 解决方法: 定义一个变量i=5,请求成功一个接口,让i–,直到i=0时执行下一个操作,否则不执行 axios.all 并发请求,.then(axios.spread(function(callback1, callback2)){}) promise.all 并发请求,.then(function([callback1, callback2]){}) 1.回调地狱: 函数作为参数层层嵌套 代替的为.then的链式操作 2.promis

  • 深入理解vue.js中的v-if和v-show

    深入理解vue.js中的v-if和v-show

    本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素:v-show是通过设置DOM元素的display样式属性控制显隐: (2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件:v-show只是简单的基于css切换: (3)编译条件:v-if是惰性的,如果初始条件为假,

随机推荐