关于vue中的$mount('#app')

最新推荐文章于 2025-03-31 15:21:42 发布

MarvinCC

最新推荐文章于 2025-03-31 15:21:42 发布

阅读量1.7w

点赞数 24

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43672268/article/details/105134001

版权

本文深入探讨了Vue项目中$mount('#app')的作用与意义，解释了如何在没有el属性的情况下进行组件的手动挂载，以及render函数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于$mount(’#app’)

当我们用vue脚手架（vue-cli）创建vue项目时，会生成初始的基本文件，其中关于main.js中的$mount(’#app’)做一点自己的理解。

首先他是这样的

/*

webpack打包入口文件

*/
//导入vue构造函数
import Vue from 'vue'
//导入根组件App.vue
import App from './App.vue'
//导入路由文件
import router from './router'

import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这里创建的vue实例没有el属性，而是在实例后面添加了一个$mount(’#app’)方法。

$mount(’#app’) ：手动挂载到id为app的dom中的意思

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

需要注意的是：该方法是直接挂载到入口文件index.html 的 id=app 的dom 元素上的

new Vue({
router,
render: h => h(App)
}).$mount("#app");

解释一下render函数

render: h=> h(App)
//这里的render: h=> h(App)是es6的写法
//暂且可理解为是渲染App组件
// 转换过来就是：  
// render:(function(h){
//  return h(App);
// });

或者

new Vue({
el: '#app',
router,
render: h => h(App)
// render: x => x(App)
// 这里的render: x => x(App)是es6的写法
// 转换过来就是：  暂且可理解为是渲染App组件
// render:(function(x){
//  return x(App);
// });
});