In Vue. js, the three solutions that easily solve v-for execution errors are: vue. jsv-

In Vue. js, the three solutions that easily solve v-for execution errors are: vue. jsv-

Preface

Vue. js is an open-source front-end development library that provides efficient data binding and flexible component systems through simple APIs. In the complex front-end ecosystem, Vue. js has received a certain degree of attention in recent years. Currently, over 5000 Vue. js has been deployed on GitHub.

This article summarizes and shares the pitfalls I have learned in development practices, hoping to help you learn Vue. Next let's take a look at the detailed introduction:

[Problem description]

If a null value exists in the v-for traversal array, the page reports an error as follows:

The development framework is the core of Vue model binding. You can make a simple judgment based on errors:

▪Since the removeChild operation does not occur in the code displayed and written by the developer, it should be caused by the removal of dom nodes by the Vue engine after the model is destroyed.

▪The error stack information is included in the Framework Code. This operation cannot be triggered by user code.

The operation of a certain process by a developer will trigger this error 100% stably. This error causes the js execution terminal, and the entire program is paralyzed and cannot work, the developer's operation procedure can be simplified to the following steps:

1. Access view.

2. Access View B.

3. roll back the history to. (Error occurs here)

The above jump relationships are all view jumps, that is, the route jumps that occur within the routing system. According to the routing logic, the declared Periodic Functions of the view will be executed in sequence in step 3, including:

▪View B's unRender logic, including beforeUnRender and afterUnRender.

▪A view Render, including beforeRender and afterRender.

The developer only resets the model in the beforeRender stage. It is almost certain that the error is caused by the operations of resetting and assigning values to these models. Multiple layers of exclusion can find a way to use simple code to repeat this problem.

[Reproduction method]

Prepare a simple empty project and create a view test. The following code is js/view/test. js and html/view/test.html, js/view/test. the operations on the model by visual charts in js can completely reflect the process of recreating this problem. SetTimeout simulates ajax operations to set data to the model after multiple tick operations to observe the creation and destruction of dom nodes by Vue.

$nextTickThen, the test_arr is left empty so that vue can destroy the dom node corresponding to the data. The corresponding code is as follows:

The above code can stably solve the problem again. The following is a solution.

[Solution]

This problem is easy to solve without a thorough solution. Here are several temporary solutions.

▲Solution 1

Slave error messageUncaught TypeError: Cannot read property 'removeChild' of nullWe can see that this problem occurs because removeChild is executed on the null object.

Modify the Vue framework code and run the following code:

To:

▲Solution 2

In-depth analysis, why?el.parentNodeIt will be null. We can see through the above reproduction steps that whenthat.model.test_arr = ["","4","","5","6",""]After this code is set, three dom nodes are generated by v-for, instead of five. In this caseel.parentNodeThere is no such problem. Therefore, a second solution is created, which forces elements that do not empty data to generate dom nodes.

▲Solution 3

The problem is not a perfect solution. Under normal circumstances, the framework should be robust and adapt to different application scenarios. js errors should not occur, so it is necessary to study them in depth.

In the Vue, there is an optional track-by configuration for the v-for command:

▪No track-by condition: when data is modified, dom is re-rendered regardless of whether the value is modified or not.

▪Track-by: when the data is modified, the dom where the unchanged data is located is not re-rendered, and the dom where the changed data is located is re-rendered.

By default, v-for determines the degree of reuse of existing scopes and DOM elements based on the features of Data Objects, which may cause re-rendering of the entire list. However, if each object has a unique ID attribute, you can use the track-by feature to give the Vue a prompt. Therefore, the Vue can reuse existing instances as much as possible. So there is a third solution.

[Cause Analysis]

If a null value exists in the v-for traversal array, an error is reported on the page. This error mainly occurs when the value is determined in the traversal condition. To ensure the reuse of dom nodes, Vue has a built-in dom cache that is accessed by id. It analyzes the dom_id of the data and obtains the dom node from the cache based on the id. Because the same dom_id is obtained for different data, no dom node is created. However, when the final array is left empty and the dom node is removed after the model is changed, the remove operation is triggered for these dom nodes, that is, the Code compatible in solution 1:

Therefore, the problem must occur in the execution of the getTrackByKey function. The following is the code for getTrackByKey:

The Data Binding operation in Vue greatly improves the efficiency of developer application development, but at the same time it is accompanied by some difficult-to-detect problems, especially when the reproduction conditions of the problems in this article are relatively complex, testing may not cover the trigger conditions of the problem. In this case, developers need to be vigilant.

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.