vue四种挂载方式区别

Posted 2023-03-14

参考技术A 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);// );