如何解析Vue脚手架生成的main.js文件

使用Vue CLI生成一个项目后,会在项目根目录中生成main.js文件,其主要内容如下。

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

初学者往往会对上述代码感到疑惑。这里对这段代码进行以下解析。

1. Vue实例化

上述代码中,使用Vue()构造函数创建Vue应用的一个根实例。每个Vue应用都必须从一个根实例开始。

2. 在选项对象中指定渲染函数

实例化时应该为Vue()构造函数传入一个选项对象,其中可以包含各种各样的选项,例如el、data、methods、computed、render等等。

render用于指定Vue实例的渲染函数,其类型为:(createElement: () => VNode) => VNode,createElement的返回值为VNode,即虚拟节点。作为Vue生态系统的惯例,使用h作为createElement的别名。

渲染函数给出字符串模板的代替方案,可以使开发者发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建虚拟节点。如果在Vue 选项中存在 render 函数,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

上述代码中,渲染函数以ES6箭头函数形式给出,如果改用ES5语法,则应写成以下形式:

function(createElement) {return cerateElement(App) //App为从App.vue文件中导入的组件}

3. 挂载Vue实例

创建Vue实例后,调用该实例的$mount()方法挂载该实例,并为其传入元素或选择器作为参数,上述代码中为id选择器。

如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,即没有关联的 DOM 元素。在这种情况下,可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

郑重声明:本文内容及图片均整理自互联网,不代表本站立场,版权归原作者所有,如有侵权请联系管理员(admin#wlmqw.com)删除。
用户投稿
上一篇 2022年6月28日 00:44
下一篇 2022年6月28日 00:44

相关推荐

联系我们

联系邮箱:admin#wlmqw.com
工作时间:周一至周五,10:30-18:30,节假日休息