new Vue({
router,
render: h => h(App)
}).$mount(\\\'#app\\\')
将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始,我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入 const h = this.$createElement,这样你就可以去掉 (h) 参数了。对于更早版本的插件,如果 h 在当前作用域中不可用,应用会抛错。
https://cn.vuejs.org/v2/guide/render-function.html#JSX
在 Vue 中也是可以使用 JSX 语法的,JSX 语法写在 render 函数里,如果页面 render 函数存在,那么就不会从页面的 template 模板里提取 HTML。
if (typeof tag === \\\'string\\\')//判断
createComponent(Ctor, data, context, children, tag);//执行
方法里把 Vue 赋值给 baseCtor 然后去执行一个 baseCtor.extend 扩展,扩展里面会执行一个 validateComponentName 函数,来判断你组件的名字是不是保留标签。函数内部:
if (isBuiltInTag(name) || config.isReservedTag(name)) {
warn(
\\\'Do not use built-in or reserved HTML elements as component \\\' +
\\\'id: \\\' + name
);
}
var isHTMLTag = makeMap(
\\\'html,body,base,head,link,meta,style,title,\\\' +
\\\'address,article,aside,footer,header...
);
var isSVG = makeMap(
\\\'svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,\\\' +
\\\'foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,\\\' +
\\\'polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view\\\',
true
);
递归处理组件的创建,所以插入组件的时候是先插入子组件,最后插入父组件。
推荐阅读
如何用 vue-cli 调试源码
原创文章,作者:小道研究,如若转载,请注明出处:https://www.sudun.com/ask/34628.html