new Vue({ render: h => h(App), }).$mount('#app')到底什么意思

new Vue({ render: h => h(App), }).$mount('#app')到底什么意思

render函数的作用
render函数是vue通过js渲染dom结构的函数createElement，约定可以简写为h

render: h => h(App) 是下面内容的缩写：

1. render:function(createElement){
   
2.    return createElement(App);
   
3. }

复制代码

继续缩写

1. render(createElement){
   
2.     return createElement(App);
   
3. }

复制代码

继续缩写

1. render(h){
   
2.   return h(App)
   
3. }

复制代码

箭头函数

1. h => h(App)

复制代码

实际渲染

1. import App from './App'
   
2. import Vue from 'vue'
   
3. new Vue({
   
4.   el:'#root',
   
5.   template:'<App></App>',
   
6.   components:{
   
7.     App
   
8.   }
   
9. })

复制代码

手动挂载
在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$mount('#app')进行挂载。

1. // 配置了el属性：
   
2. 
   
3. new Vue({
   
4.     el:"#app",
   
5.     router
   
6. });
   
7. 
   
8. // 如果没有配置el属性，可以使用手动挂载$mount("#app")
   
9. new Vue({
   
10.     router
    
11. }).$mount('#app');
    
12. var vm = new Vue({
    
13.     router
    
14. });
    
15. vm.$mount('#app');

复制代码