Summary of vue construction and routing usage

This time I will bring you a summary of vue construction and routing usage. What are the precautions for vue construction and routing usage? The following is a practical case, let’s take a look.

1. Three mounting methods for components

Automatic mounting

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

Manual mounting

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

// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例
var app= Vue.extend({ 
 template: '<p>{{message}}</p>', 
 data: function () { 
 return { 
  message: 'message'
  } 
 } 
 }) 
 new app().$mount('#app') // 创建 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>亲，请登录</router-link>
  <router-link>免费注册</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:'', components:{App} used in conjunction with render alone :h=>h(App) will achieve the same effect

The former recognizes the

new Vue({
 el: '#app', // 相当于 new Vue({}).$mount('#app');
 template: '<app></app>', // 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 by the created() hook function of Vuelife cycle must be placed in the callback function of Vue.nextTick() middle. 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, and execute callback1[event loop 1 ] -> Search the asynchronous queue, push it into the execution stack, and 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:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

vue-cli webpack creates project error

How does the jquery fullpage plug-in operate the head and tail

The above is the detailed content of Summary of vue construction and routing usage. For more information, please follow other related articles on the PHP Chinese website!