vue四种挂载方式区别

1.第一种,最常见.vue-cli模板就是这样

import Vue from 'vue'

import App from './App'

new Vue({

    el: '#app',                                  //#app 元素的 outerHTML 是 Vue 模板，该模板可以被编译成 render function。

    template: '<App/>',

    components: { App }

})

2.第二种，这种挂载是直接挂载到入口文件index.html 的 id=app 的dom 元素上

new Vue({

    router,

    store,

}).$mount('#app')       

3.第三种，

new Vue({

    router,

    store,

    render: h => h(App)

}).$mount('#app')

4.第四种，

new Vue({

     el:'#app',  

     router,  

     render: h =>h(App)

})

 5.第五种：

var options = {

    el: '#app',

     store,

     router,

     ...App

};

new Vue(options)

$mount()用于手动挂载

当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中假如需要延迟挂载，可以在之后手动调用vm.$mount()方法挂载。

例如：newVue({router,render:h=>h(App)}).$mount("#app");

render: x => x(App)// 这里的render: x => x(App)是es6的写法// 

转换过来就是： 暂且可理解为是渲染App组件// 

render:(function(x){// return x(App);// });