This time I will give you a detailed explanation of the mounting method of VUE components, and what are the precautions for mounting VUE components. 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 id="app"> {{name}} </p>
<button onclick="test()">挂载</button>
<script>
var obj= {name: '张三'}
var vm = new Vue({
data: obj
})
function test() {
vm.$mount("#app");
}// 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:'/login',params: {isLogin: true}} -->
<!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); -->
<!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; -->
<router-link :to="{name:'login',params: {isLogin: true}}">亲，请登录</router-link>
<router-link :to="{name:'login',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:'
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: '<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 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:
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:
preload() function and image upload usage
vue-cli initialization webpack template error report
The above is the detailed content of Detailed explanation of VUE component mounting method. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
