关于Vue中的 render: h => h(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 的缩写(超文本标记语言)
理解:createElement 函数是用来生成 HTML DOM 元素的,也就是上文中的 generate HTML structures,也就是 Hyperscript,这样作者才把 createElement 简写成 h。
Vue.js 里面的 createElement 函数,这个函数的作用就是生成一个 VNode节点,render 函数得到这个 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。
还有另外一种写法效果是一样的:
import App from './App'
new Vue({
el: '#root',
template: '<App></App>',
components: {
App
}
})
关于Vue中的 render: h => h(App) 具体是什么含义?的更多相关文章
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- Vue中的render函数随笔
使用vue-cli创建项目后,再main.js里面有这样一段代码: new Vue({ render:h => h(App) }).$mount('#app') render函数是渲染一个视图, ...
- vue中的render函数介绍
简介:对于不了解slot的用法(参考:大白话vue-slot的用法)又刚接触render函数的同学来说,官网的解释无疑一脸懵逼,这里就整理下个人对render函数的理解 问题: 1.render函数是 ...
- 在vue中结合render函数渲染指定的组件到容器中
1.demo 项目结构: index.html <!DOCTYPE html> <html> <head> <title>标题</title> ...
- Vue 中使用 TypeScript 详细总结
VUE 项目中使用 Typescript 第一节:项目起步 Vue 中使用 TypeScript 项目中主要使用到的第三方依赖 vue2 vue-class-component vue-propert ...
- vue中的单文件组件
之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...
- Vue中Jsx的使用
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...
- 【vue】index.html main.js app.vue index.js怎么结合的? 怎么打包的?搜集的信息
转载:https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的: 一.启动项目 第一步:cmd进入项目文件里,运行npm ...
- vue中如何使用event对象
原文地址 一.event 对象 (一)事件的 event 对象 你说你是搞前端的,那么你肯定就知道事件,知道事件,你就肯定知道 event 对象吧?各种的库.框架多少都有针对 event 对象的处理. ...
随机推荐
- css垂直居中怎么设置?文字上下居中和图片垂直居中
css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...
- mysql连接池不能回避的wait timeout问题(转)
起因 我们的项目组一直在使用albianj作为开发框架在开发应用.使用至今倒也是没有出现很大的问题,但最近加过监控的接口基本上都会在使用一段时间后,突然之间执行数据库操作变得很慢.虽然会变慢,但持续的 ...
- Mysql常用的存储引擎
存储引擎 存储引擎是表级别的概念,不同的存储引擎保存数据和索引的方式是不相同的. MyISAM存储引擎 MyISAM最典型的性能问题就是表锁的问题. MyISAM只将数据写到内存中,然后等待操作系统 ...
- 010-docker-安装-elasticsearch:5.4.3
1.搜索镜像 docker search elasticsearch 2.拉取合适镜像 选择合适tag:https://hub.docker.com/ docker pull elasticsearc ...
- 虚函数后面的const=0
const 和 =0要分开理解. 成员函数后面用 const 修饰,const表示this是一个指向常量的指针,即对象成为一个常量,即它的成员不能够变化.(默认情况下,this的类型是指向类类型非常量 ...
- git revert 撤销merge的动作
在执行完git merge提交以后,通常会merge过的分支的提交记录都带过来,比如A分支merge到了B分支,那么B分支上肯定有A分支的提交记录,如果此时要回退这个merge动作,是产生一条reve ...
- css--clearfix浮动
解读浮动闭合最佳方案:clearfix: http://www.daqianduan.com/3606.html clearfix清除浮动进化史:http://www.admin10000.com/d ...
- jmeter 二次开发---实现自定义函数插件
1.前提: 有时候,Jmeter自带的函数,可能不能满足于业务的需求,这时候,我们可以自己写一个函数插件: 2.创建maven工程 一直next,输入GroupID,ArtifactId->fi ...
- android怎么抓取双向认证https的包
这里仅提供思路. 第一种方法: dex层面,可以直接用插日志方法,找到app使用的https库,这里以某app为例,使用okhttp, okhttp收发包相关代码: Request request = ...
- jenkins构建多个项目执行顺序设置
通常我们会在jenkins中构建多个项目,那么如果项目有依赖,或者有关联怎么办? 例: 如下图: ,有两个构建项目,posWeb是个web项目,welife是接口项目. 由于接口项目数据会影响pos ...