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

// 可以实现延迟按需挂载
<p id="app"> {{name}} </p> 
<button onclick="test()">挂载</button> 
<script> 
 var obj= {name: &#39;张三&#39;} 
 var vm = new Vue({ 
 data: obj
 }) 
 function test() { 
 vm.$mount("#app"); 
 }

// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例
var app= Vue.extend({ 
 template: &#39;<p>{{message}}</p>&#39;, 
 data: function () { 
 return { 
  message: &#39;message&#39;
  } 
 } 
 }) 
 new app().$mount(&#39;#app&#39;) // 创建 app实例，并挂载到一个元素上

2 , The way of routing parameters

<p>
  <!-- query要用path来引入，params要用name来引入,故不能写为 :to="{path:&#39;/login&#39;,params: {isLogin: true}} -->
  <!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: &#39;/login&#39;, query: {isLogin : true}}); -->
  <!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; -->
  <router-link :to="{name:&#39;login&#39;,params: {isLogin: true}}">亲，请登录</router-link>
  <router-link :to="{name:&#39;login&#39;,params: {isLogin: false}}">免费注册</router-link>
 </p>
 <!-- 路由出口, 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>

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: &#39;<App/>&#39;, // 1、可以通过在 #app 内加入<app></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.

Related articles:

How to use Angular CLI for unit testing and E2E testing

Using Angular CLI for Build and E2E testing Serve detailed explanation

How to generate routes using Angular CLI

The above is the detailed content of Summary of VUE key issues. For more information, please follow other related articles on the PHP Chinese website!