render: h => h(App) $mount 什么意思

初始一个vue.js项目时,经常发现main.js里有以下代码:html

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

这什么意思?那我本身作项目怎么改?
其实render: h => h(App)vue

render: function (createElement) {
    return createElement(App);
}

进一步缩写为(ES6 语法):webpack

render (createElement) {
    return createElement(App);
}
render (h){
    return h(App);
}

ES6箭头函数git

render: h => h(App);

其中 根据 Vue.js 做者 Even You 的回复,h 的含义以下:es6

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
它来自术语"hyperscript",其一般用在 virtual-dom 的实现中。Hyperscript 自己是指
生成HTML 结构的 script 脚本,由于 HTML 是 hyper-text markup language 的缩写(超文本标记语言)

在这里推荐你们看官方文档:github

渲染函数RenderFunction&JSX的

API之Mount方法

将 h 做为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,若是在做用域中 h 失去做用,在应用中会触发报错。

虚拟DOM / VNode

createElement 到底会返回什么呢?其实不是一个实际的 DOM 元素。createElement更准确的名字多是 createNodeDescription,由于它所包含的信息会告诉 Vue 页面上须要渲染什么样的节点,及其子节点。咱们把这样的节点描述为“虚拟节点 (Virtual Node)”,也常简写它为“VNode”。“虚拟 DOM”是咱们对由 Vue 组件树创建起来的整个 VNode 树的称呼。

整体来讲,我带着揣测认为,Vue 在调用 render 方法时,会传入一个 createElement 函数做为参数,也就是这里的 h 的实参是 createElement 函数,这个函数的做用就是生成一个 VNode节点,render 函数获得这个 VNode 节点以后,调用了 mount 方法,渲染成真实 DOM 节点,并挂载到(一般是div app)??节点上。web

因此有时候你能够这么写...mount在root上了,通常都是在app上
mount在root上api

我粗略的看了一下,这里其实牵扯到了一堆,好比:
其实vue有两种渲染方法,一种是经过模板<template>
一种是render function
https://github.com/pfan123/fr...babel

babel-plugin-transform-vue-jsxapp

没搞懂..有空再填坑..

参考:
1.https://github.com/vuejs-temp...
2.https://cn.vuejs.org/v2/guide...

相关文章
相关标签/搜索