vue中render: h = h(App)的详细解释

2018年06月20日 10:54:32 H-L 阅读数 5369

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 的缩写（超文本标记语言）

个人理解：createElement 函数是用来生成 HTML DOM 元素的，也就是上文中的 generate HTML structures，也就是 Hyperscript，这样作者才把 createElement 简写成 h。

Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

转载于:https://www.cnblogs.com/huge1122/p/11272032.html

vue中render: h = h(App)的详细解释相关推荐

vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
Vue中render: h = h(App)的含义
原文地址:Explanation for render: h => h(App) please 翻译如下: render: h => h(App) 是下面内容的缩写: render: fu ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
js 获取vue组件html_关于Vue中main.js，App.vue，index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
vue中 .env .env.development .env.production 详细说明
1.配置文件有: .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 2.命名规则: 属 ...
theano中的Rop和Lop的详细解释
#------------------------------------------序------------------------------------------------------- ...
vue中render函数的作用及解析
在vue脚手架的main.js文件中,存在这样一段代码: 意思是对vue实例的配置,其中render函数的作用是,将h创建的Node节点信息return返回给Vue.js底层处理文件中的beforeM ...
vue中使用海康实时监控详细代码
第一步:下载海康的js包,并在html中引入: 第二步:在相应的页面中开始编写,具体代码如下: <template><el-container><el-aside wid ...
vue中实现生成海报图片html2canvas详细教程
该插件详细配置文档地址建议谷歌浏览器打开,因为翻译的比较准确实现效果如图所示 1.安装插件 npm install --save html2canvas 2.将要生成图片的区域用大的元素包裹起来例如 ...

vue中render: h = h(App)的详细解释

vue中render: h = h(App)的详细解释相关推荐

最新文章

热门文章