Summary of VUE key issues

This article summarizes the important and difficult points of VUE, and shares the code in detail. Friends who are interested can learn from it.

1. Three mounting methods for components

Automatic mounting

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

// 可以实现延迟按需挂载 {{name}}

挂载 var obj= {name: '张三'} var vm = new Vue({ data: obj }) function test() { vm.$mount("#app"); } // Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例 var app= Vue.extend({ template: ' {{message}}

', data: function () { return { message: 'message' } } }) new app().$mount('#app') // 创建 app实例，并挂载到一个元素上 2 , The way of routing parameters

亲，请登录 免费注册

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

render:h=>h (App) is the arrow function writing method in ES6, which is equivalent to render:function(h){return h(App);}.

1. This in the arrow function points outside the function that wraps this. on the object.

2.h is the alias of creatElement, the general management of the vue ecosystem

3.template:'6869895f5d1da417a80af13d85b70d77', components:{App} used in conjunction with render alone :h=>h(App) will achieve the same effect

The former recognizes the d477f9ce7bf77f53fbcf36bec1b69b7a tag, and the latter directly parses the id under the template as the p of the app (ignoring the existence of the template)

new Vue({ el: '#app', // 相当于 new Vue({}).$mount('#app'); template: ' ', // 1、可以通过在 #app 内加入 替代 2、或者 通过 render: h => h(App) 渲染一个视图，然后提供给el挂载 components: { // vue2中可以通过 render: h => h(App) 渲染一个视图，然后提供给el挂载 App } }); 4. Understanding of Vue.nextTick()

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

nextTick Origin:

Because VUE's data-driven view update is asynchronous, that is, when the data is modified, the view will not be updated immediately, but will wait until all data changes in the same event loop are completed. Unified view updates.

NextTick triggering timing:

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

Application scenario:

Need to operate based on the new view after the view is updated.

DOM operations performed in the created() hook function of 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 at all when the create() hook function is executed, and DOM operations at this time are in vain, so the js code for DOM operations must be put into Vue. In the callback function of nextTick(). Corresponding to this is the mounted hook function, because all DOM mounting and rendering have been completed when this hook function is executed, there will be no problem in performing any DOM operations in this hook function.

When there is an operation to be performed after the data changes, and this operation requires the use of a DOM structure that changes as the data changes, this operation should be put into the callback function of Vue.nextTick().

Simple summary of the event loop:

Synchronous code execution -> Find the asynchronous queue, push it into the execution stack, execute callback1 [event loop 1] -> Find asynchronous Queue, push into the execution stack, execute callback2 [event loop 2]...that is, each asynchronous callback will eventually form its own independent event loop. Combined with the origin of nextTick, we can deduce the timing of nextTick triggering in each event loop:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.