Global Configuration of Vue 2.x API Series (1)

ignoredElements

Vue displays Unknown Custom Element warnings when we use undefined components.

Person <div id="app"> <person></person> </div> <script> var Vue = new Vue({el: '#app',}) </script> # --> Console print [Vue WARN]: Unknown Custom Element: <person> - did you register the component correctly? For recursive components, make sure to provide the "name" option.Copy the code

Modify script as follows:

< script > Vue. Config. IgnoredElements = [' person '] var Vue = new Vue ({el: '# app,}) < / script > # - > console without error log printingCopy the code

Even if Vue ignores custom elements outside of Vue (e.g., using the Web Components APIs). Otherwise, it will assume that you forgot to register the global component or misspelled the component name, and will throw a warning about the Unknown Custom Element

Usage scenarios

Use ignoredElements when we introduce components from other third-party libraries, but vue throws errors that we want to avoid

keyCodes

Key modifier

When listening for keyboard events, we often need to check for detailed keystrokes. Vue allows you to add key modifiers for V-Ons when listening for keyboard events 

'vm.submit()' <input V-on :keyup. Enter ="submit">Copy the code

For a complete example, note here add(), the arrow function cannot be used because this points to a problem

<div id="app"> <input type="text" V-on :keyup.enter="add" V-model ='a'/> <input type="button" value=" plus "> </div> <script> var Vue = new Vue({ el: '#app', data:{ a:1 }, Methods :{add:function () {this.a +=this.a console.log(this.a)}}}) </script>Copy the code

The running results of the above code are shown as follows:

Use keyCodes to customize key aliases for V-Ons

This example is key modification for F2

<div id="app"> <input type="text" V-on :keyup.f2="add" V-model ='a'/> <input type="button" value=" plus "> </div> <script> Vue. Config. KeyCodes = {v: 86, # f2} var Vue = new Vue({el: '#app', data:{ a:1 }, methods:{ add:function () { this.a +=this.a console.log(this.a) } } }) </script>Copy the code

performance

2.2.0 new

Set to true(the default is false) to enable performance tracking for component initialization, compilation, rendering, and patching in the browser developer’s Performance/timeline panel. Only works in development mode and on browsers that support the Performance. Mark API.

What is the Performance?

Performance is an API for monitoring front-end Performance. It can detect Performance in a page. A new API introduced by the W3C Performance Group can detect white screen time, first screen time, user-available time nodes, total page download time, DNS query time, TCP connection time, etc., such as Performance in Google Console

Use the following code:

 var performance = window.performance ||
        window.msPerformance ||
        window.webkitPerformance;
    if (performance) {
        console.log(performance);
    }
Copy the code

Console prints the performance value:

Performance has three values: memory, navigation, timing. Memory is associated with memory, and navigation is associated with the source, meaning the jump is from that place. Timing is a critical point. API attribute values

  • JsHeapSizeLimit Indicates the memory size limit.
  • TotalJSHeapSize indicates the total memory size.
  • UsedJSHeapSize indicates the size of available memory.

If usedJSHeapSize is greater than totalJSHeapSize, then there is a memory leak problem, so it is not allowed to be greater than this value.

  • Performance. Navigation indicates the source information of the page. The object has two property values: redirectCount and Type.

  • RedirectCount: This value means that the page is redirected several times, if any. The default value is 0.

  • Type: the meaning of the value indicates how the page is opened. The default value is 0. The value can be 0, 1, 2, or 255.



0 (TYPE_NAVIGATE) : indicates that the page is normally entered (not refreshed or redirected).


1 (TYPE_RELOAD) : represents the page refreshed via window.location.reload -. If I refresh the page now and look at it again, it’s going to be 1.


2 (TYPE_BACK_FORWARD) : indicates the page accessed through the forward and back buttons of the browser. If I go to the page and then go back to the page and look at the printed value, it’s 2.


255 (TYPE_RESERVED) : indicates that the page is not entered in the above way.

. (You can search for the rest)

Use Performance in vUE to enable performance tracking

Performance is mainly used in Vue source code to obtain web page performance data, including performance. Mark (mainly used to create tags) and performance. Measure (mainly used to record the time interval between two tags).

performance.mark('start'); Performance. Mark ('end'); Performance. Measure ('output', 'start', 'end'); # computing time interval performance. Both getEntriesByName (" output "); The return value is an array containing interval dataCopy the code

When enabled, the API (new in 2.2.0) only works in development mode and on browsers that support the Performance. Mark API. After enabled, you can download Vue Performance Devtool, a Chrome plug-in, to view the loading status of each component

productionTip

Default to true, set to false to prevent vUE from generating production prompts on startup.

Vue 2.x API Series global API