This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Why does the vue component data have to be a function when the vue root instance does not have this restriction?

Each time the function is executed, it returns a new instance of the data object

2. There may be multiple instances of vue components. If data is defined in the form of an object, many components will share the same data.

3, the principle is vUE data use function, in the source initData as a factory function to return a new data object, can avoid the second occurred in the data data update affects other components of the problem.

What is the function and principle of key in Vue?

//html: <div v-for="item in nums" :key="item">{{item}}</div> //js: const app = new Vue({ el:'demo', data: { nums: [' a ', 'b', 'c', 'd', 'e']}, mounted () {setTimeout (() = > {this. Nums. Splice (2, 0, 'f'); }, 1000); }});Copy the code

In the above code, we need to add an f field to the array at initialization time. If key is allowed, this will cause the following problem

Do not use the key

If you interrupt debugging during execution, you can find the updateChildren() method in the source code SRC \core\vdom\patch.js as shown in the figure above

1. The function of key is mainly to update DOM more quickly. The principle is that the key in the patch process of vUE source code can accurately judge whether two nodes are the same, so as to avoid updating different elements, reduce DOM operations and improve performance

2. Bug of warn warning when not setting key

3. Vue will also use keys when switching between DOM transitions using the same elements, so that vue can distinguish them. Otherwise, Vue can only replace internal attributes without triggering excessive effects

What are the navigation hooks in vue-Router?

1. Global navigation hooks

BeforeEach (to, From, Next) Triggers this method before route changes and can be used when users authenticate permissions

To: Indicates the route object to be jumped

From: Indicates the route object of the current page

Next: Route control parameters, determine some permissions, and then control:

The next() route performs the jump normally

If next(false) cancels the navigation,

Next (‘/index’) Next (‘/index’) Next (‘/index’)

Next (error) If there is an error instance, the navigation is terminated and the error is passed to router.onError(), going to the hook after afterEach(to,from) route changes

beforeEach((to,from,next) => { if(to.fullPath ! = '/login') {// if it is not the login page if(! Localstorage.token) {// If there is no token next('/login'); }else {next(); }}else {next(); // Normal jump}})Copy the code

2. Navigation hooks in components

1) beforeRouteEnter (to, from, next); Similar to the above method, but the instance has not yet been created, so the instance this cannot be obtained

2) beforeRouteUpdate (to, from, next); The current route does not change, but is triggered when the component is being reused to obtain the instance this

3) beforeRouteLeave (to, from, next); Fired when the navigation leaves the component to retrieve the instance this

Use watch to listen for changes in $route

The principle of nextTick

The mutationObserver is a new property in H5. It is used to listen for DOM modification events. It can listen for node properties, text, and so on.

Var observer = new mutationObserver (function() {console.log('dom changed '); }); var content = document.querySelector('content'); observer.observer(content);Copy the code

You can check out the source code/SRC /core/util/env. Js, which uses the event loop mechanism, because you can trigger DOM updates with clicks, page rendering, script execution, network requests, etc. To coordinate these events, the browser uses the event loop mechanism.

Event Loop

One or more queues are maintained, and the above method of triggering the DOM adds tasks to the queue, has a continuous thread to execute them, and removes one when it is finished.

So the code to be executed in the nextTick is executed at the end of the queue, so as to have the effect of executing after the DOM is updated. It is also possible to use the setTimeout delay at just the right time. But vue’s data response process is: data change -> notify watcher-> update dom. However, we don’t know when data modification will occur. If multiple renderings occur before redrawing, performance will be wasted. More importantly, we need to understand another concept of event loop: Microtask.

In summary:

1, Vue uses asynchronous queue method to control DOM update and nextTick callback after execution

2. Microtask has a priority feature to ensure that microtasks in the queue are completed before an event loop

V. VUE’s design principles

1. Progressive javaScript frameworks

Vue is designed as a bottom-up layer-by-layer application. The core of VUE only focuses on the view layer, which is easy to use and can be integrated with third-party libraries. It can fully realize complex single-page applications and provide drivers.

2, easy to use

Vue provides the core of data-responsive, declarative template syntax and configuration-based component system, so we only need javascript, HTML, CSS to develop VUE

3, flexible,

If an application is small, it only needs vUE core function development; if the application is large, it can add route management and VUEX for convenient and flexible development

4, efficient,

The fast internal updating of the virtual DOM and the use of the DIff algorithm improve a lot of performance. Vue3 also uses proxy for data response improvements and the compiler for static content compilation to make VUE more efficient.