Summary of key VUE issues and summary of VUE issues

Summary of key VUE issues and summary of VUE issues

1. Three Mount methods for components

Automatic mounting

var app3 = new Vue({ el: '#app-3', data: { seen: true }})

Manual mounting

// Delayed on-demand mounting <div id = "app" >{{ name }}</div> <button onclick = "test () "> Mount </button> <script> var obj = {name: 'zhang san'} var vm = new Vue ({data: obj}) function test () {vm. $ mount ("# app ");}

// Vue. extend () creates a subclass that is not mounted. You can use this child to create multiple instances var app = Vue. extend ({template: '<p >{{ message }}</p>', data: function () {return {message: 'message '}}}) new app (). $ mount ('# app') // create an app instance and mount it to an element.

2. Route Transmission Parameters

<P> <! -- Query should be introduced using path and params should be introduced using name. Therefore, it cannot be written as: to = "{path: '/login', params: {isLogin: true }}--> <! -- This. $ router: this. $ router. push ({name: "login", params: {isLogin: true}); this. $ router. push ({path: '/login', query: {isLogin: true}); --> <! -- This is used to receive parameters. $ route: this. $ route. query. isLogin and this. $ route. params. isLogin; --> <router-link: to = "{name: 'login', params: {isLogin: true}"> dear, log on to </router-link> <router-link: to = "{name: 'login', params: {isLogin: false }}"> free registration </router-link> </p> <! -- Route egress. The components matching the route are rendered here --> <router-view> </router-view>

3. Understanding of render: h => h (App)

Render: h => h (App) is the expression of the arrow function in ES6. It is equivalent to render: function (h) {return h (App );}.

1. this In the arrow function points to the object outside the function that contains this.

2. h is the alias of creatElement and the general management of the vue Ecosystem

3. Use template: '<app/>', components: {App} together with use of render: h => h (App) separately.

The former recognizes the <template> tag, and the latter directly parses the div whose id is app under the template (ignore the existence of the template)

New Vue ({el: '# app', // equivalent to new Vue ({}). $ mount ('# app'); template:' <app/> ', // 1. You can add <app> </app> to the # app to replace 2, or use render: h => h (App) to render a view, then, you can use render: h => h (App) to render a view for el mounting components: {// vue2, and then provide it to el mounting App }});

4. Understanding of Vue. nextTick ()

DOM-related operations are written in the callback of the function to ensure that the DOM has been rendered.

NextTick:

Because the VUE data-driven view update is asynchronous, that is, when the data is modified, the view is not updated immediately, but after all the data changes in the same event loop are completed, update the view in a unified manner.

NextTick trigger time:

After the data changes in the same event loop, the DOM completes the update and immediately executes the callback in nextTick (callback.

Application scenarios:

After the view is updated, the operation is performed based on the new view.

DOM operations performed by the created () Hook Function in the Vue life cycle must be placed in the callback function of Vue. nextTick. What is the reason? The reason is that the DOM is not rendered during the execution of the created () hook function, and the DOM operation is futile at this time, therefore, JavaScript code for DOM operations must be put into Vue. in the callback function of nextTick. The corresponding function is the mounted hook function, because all DOM mounting and rendering are completed when the hook function is executed, and there is no problem in performing any DOM operations in the hook function.

An operation to be executed after the data changes. When this operation requires the DOM structure changed as the data changes, this operation should be put into Vue. in the callback function of nextTick.

Summary:

Synchronous Code Execution-> finding asynchronous queues, pushing the execution stack, executing callback1 [event loop 1]-> searching asynchronous queues, pushing the execution stack, and executing callback2 [event loop 2]... that is, each asynchronous callback will eventually form an independent event loop. Based on the origin of nextTick, You can launch the nextTick trigger time in each event loop: