Summary of VUE key issues-JS Tutorial-php.cn

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 } }) Copy after login Manual mounting

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

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

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

亲，请登录 免费注册

Copy after login 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:' ', components:{App} used in conjunction with render alone :h=>h(App) will achieve the same effect

The former recognizes the 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 } }); Copy after login 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.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Summary of VUE key issues