render: h => h(App) $mount 什么意思
初始一个vue.js项目时,常常发现main.js里有如下代码:
new Vue({ render: h => h(App) }).$mount('#app')
这什么意思?那我自己做项目怎么改?
其实render: h => h(App)
是
render: function (createElement) { return createElement(App); }
进一步缩写为(ES6 语法):
render (createElement) { return createElement(App); }
render (h){ return h(App); }
ES6箭头函数
render: h => h(App);
其中 根据 Vue.js 作者 Even You 的回复,h 的含义如下:
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 的缩写(超文本标记语言)
在这里推荐大家看官方文档:
渲染函数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)??节点上。
所以有时候你可以这么写...mount在root上了,一般都是在app上
我粗略的看了一下,这里其实牵扯到了一堆,比如:
其实vue有两种渲染方法,一种是通过模板<template>
一种是render function
https://github.com/pfan123/fr...
babel-plugin-transform-vue-jsx
没搞懂..有空再填坑..
参考:
1.https://github.com/vuejs-temp...
2.https://cn.vuejs.org/v2/guide...
相关推荐
heheeheh 2020-06-06
TaoTaoFu 2020-06-04
wkwanglei 2020-05-26
suosuo 2020-05-15
LuoXinLoves 2020-05-11
benico 2020-04-26
姚强 2020-04-06
xhpscdx 2020-03-06
小惠 2013-06-27
lovelily 2013-04-01
拿什么来拯救自己 2013-07-20
杨友山 2019-12-25
jackalwb 2019-12-24
akcsdno 2019-12-18
xinlugang 2019-12-11
DEPHI 2013-08-23
技术老炮儿 2014-02-28