Vue中的new Vue render

MikazukiMo

于 2020-06-01 12:12:43 发布

阅读量777

点赞数

分类专栏：学习

本文链接：https://blog.youkuaiyun.com/MikazukiMo/article/details/106469945

版权

学习专栏收录该内容

28 篇文章

订阅专栏

本文探讨了Vue中的`new Vue`和`render`函数，解释了`h`（hyperscript）的来源及其在虚拟DOM中的作用。同时提到了`createElement`在生成VNode节点中的角色，以及`$mount`函数在将VNode转换为真实DOM并挂载到页面上的过程。通过ES6的语法糖和箭头函数，深入理解Vue的渲染机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

render: h => h(App) 是以下缩写：

1.基础写法

render: function (createElement) {
    return createElement(App);
}

2.ES6缩写

render (createElement) {
    return createElement(App);
}

render (h){
    return 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元素,Hyperscript
3.ES6箭头函数

render: h => h(App);

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