使用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() 手动地挂载一个未挂载的实例。