初始一个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...

原文地址:https://segmentfault.com/a/1190000014254740

render: h => h(App) $mount 什么意思的更多相关文章

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

    这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount('#app')方法. $mount('#app') :手动挂载到id为app的dom中的意思 当Vue实例没有el属性时,则该实 ...

  2. vue-cli: render:h => h(App)是什么意思

    import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: ...

  3. Vue2.0 render:h => h(App)

    new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...

  4. Vue render: h => h(App) $mount

    $mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: new Vue({ //el: ...

  5. 如何理解render: h => h(App)

    学习vuejs的时候对这句代码不理解 new Vue({ el: '#app', router, store, i18n, render: h => h(App) }) 查找了有关资料,以下为结 ...

  6. 解析vue2.0中render:h=>h(App)的具体意思

    render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}. 注意点:1.箭头函数中的this是 指向 包裹this所在 ...

  7. 关于Vue中的 render: h => h(App) 具体是什么含义?

    render: h => h(App) 是下面内容的缩写: render: function (createElement) { return createElement(App); } 进一步 ...

  8. Vue中render: h => h(App)的含义

    // ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档 render: function (createElemen ...

  9. Vue2.0 render: h => h(App)的解释

    render: h => h(App)是ES6的写法,其实就是如下内容的简写: render: function (createElement) { return createElement(A ...

随机推荐

  1. Intellij IDEA报错:Could not save application settings: java.io.IOException: java.lang.AssertionError: Unexpected content storage modificat

    Question: i have a message saying "Could not save application settings: java.io.IOException: ja ...

  2. USACO zerosum DFS 1A

    USER: Kevin Samuel [kevin_s1] TASK: zerosum LANG: C++ Compiling... Compile: OK Executing... Test 1: ...

  3. excel 字符串拼接 添加 超链接

    =HYPERLINK("http://"&C2,"http://"&C2)

  4. ios8--加载图片

    // // ViewController.m // 06-资源存放问题 #import "ViewController.h" /** 加载图片的方式: 1. imageNamed: ...

  5. [置顶] Snow的追寻

    题目描述 Snow终于得知母亲是谁,他现在要出发寻找母亲. 王国中的路由于某种特殊原因,成为了一棵有n个节点的根节点为1的树,但由于"Birds are everywhere.", ...

  6. bzoj 1078 [SCOI2008]斜堆 —— 斜堆

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1078 考察斜堆的性质: 一个点如果没有左子树,也一定没有右子树: 看了这篇精美的博客:htt ...

  7. 63.ExtJs事件(自定义事件、on、eventManager)示例

    转自:https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5 ExtJs事件(自定义事件.on.even ...

  8. ThreadLocal原理及用法详解

    背景 一直以来对ThreadLocal用法模棱两可,不知道怎么用今天好好研究了下给大家分享下. 1.讲解ThreadLocal之前先回顾下什么是取模.x^y.弱引用. 1. 取模运算实际上是计算两数相 ...

  9. android:autoLink

    android:autoLink 显示URL链接 TextView识别链接的方式有两种,一种是自动识别链接和HTML解析链接 1)自动识别链接 <!-- android:autoLink=&qu ...

  10. day03_12/13/2016_bean的管理之初始化和销毁