Shulou(Shulou.com)06/02 Report--

This article mainly introduces "some tips on sharing Vue". In daily operation, I believe many people have doubts about sharing some tips on Vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "sharing some tips on Vue"! Next, please follow the editor to study!

Scoped of component style

Vue array / object update view is not updated

The use of vue filters filter

List rendering related

Deep watch and watch immediately trigger callback

Do not use arrow functions in these cases

Routing lazy loading method

Routed project launch page and 404 page

Vue Debug artifact: vue-devtools

Scoped of component style:

Problem: dom dynamically created with js in the component, adding styles does not take effect.

Scene:

Let a=document.querySelector ('.test')

Let newDom=document.createElement ("div"); / / create a dom

NewDom.setAttribute ("class", "testAdd"); / / add styles

A.appendChild (newDom); / / insert dom

.test {

Background:blue

Height:100px

Width:100px

}

.testAdd {

Background:red

Height:100px

Width:100px

}

Results:

/ / test takes effect. TestAdd is not valid.

.test [data-v-1b971ada] {/ / Note data-v-1b971ada

Background:blue

Height:100px

Width:100px

}

Reason:

When a tag has a scoped attribute, its CSS only acts on elements in the current component.

It adds a scoped identity to all tags and class styles in the component, just like data-v-1b971ada in the above result.

So the reason is clear: because the dynamically added dom does not have the identity added by scoped and does not match the style of testAdd, the style becomes invalid.

Solution method

Recommended: remove the scoped of this component

Each component does not have a lot of css, and when it is designed to add dom dynamically and style dom, you can remove scoped, which is much more convenient than the following method.

You can add style dynamically

/ / the chestnuts above can be styled in this way

NewDom.style.height='100px'

NewDom.style.width='100px'

NewDom.style.background='red'

Vue array / object update view is not updated

Most of the time, we are used to manipulating arrays and objects like this:

Data () {/ / data data

Return {

Arr: [1,2,3]

Obj: {

A: 1

B: 2

}

}

}

/ / data update array view is not updated

This.arr [0] = 'OBKoro1'

This.arr.length = 1

Console.log (arr); / / ['OBKoro1']

/ / data update object view is not updated

This.obj.c = 'OBKoro1'

Delete this.obj.a

Console.log (obj); / / {bludy 2lt CJV OBKoro1'}

Due to the limitation of js, Vue cannot detect the changes of the above array and the addition / deletion of objects. Many people will have the problem that the view is not updated because of the above operation.

Solution:

This.$set (the array / object you want to change, the position / key you want to change, what value you want to change)

This.$set (this.arr, 0, "OBKoro1"); / / change the array

This.$set (this.obj, "c", "OBKoro1"); / / change the object

If you still don't understand, you can take a look at this codependemo.

Array native methods trigger view updates:

Vue can detect array changes, array native methods:

Splice (), push (), pop (), shift (), unshift (), sort (), reverse ()

It means that using these methods, we don't have to do any additional operations, and the view is updated automatically.

It is recommended to use the splice method for better customization, because slice can delete / add operations anywhere in the array. In this part, you can take a look at an article I wrote a few days ago: [practical information] detailed operation methods and parsing collections of js arrays.

3. Replace arrays / objects

For example, you want to iterate through the array / object, process each element, and then trigger a view update.

/ / Chestnut in the document: filter iterates through the array, returns a new array, and replaces the old array with the new array.

Example1.items = example1.items.filter (function (item) {

Return item.message.match (/ Foo/)

})

As an example: you can first save the array / object in a variable, then traverse the variable, and then replace the object / array with the variable when the traversal is over.

The entire list is not re-rendered:

Vue implements some intelligent and heuristic methods to maximize the reuse of DOM elements, so it is very efficient to replace the original array with an array containing the same elements.

If you are still confused, take a look at the explanation of this section in the Vue documentation.

Use of vue filters filters:

Filters, usually used in background management systems, or some convention types, filtering. The use of Vue filter is very simple, but many friends may not have used it, so here is a little explanation.

There are two uses in html templates:

{{message | filterTest}}

Usage in component script:

Export default {

Data () {

Return {

Message:1

}

}

Filters: {

FilterTest (value) {

/ / value is the value of message here

If (value===1) {

Return 'Last output this value'

}

}

}

}

Usage is mentioned above, you can try it in the component to know, very simple and easy to use.

If you don't want to try it yourself, you can click on the demo to modify the code. Demo includes filter concatenation and filter parameters.

At this point, the study of "some tips for sharing Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.