new Vue({ render: h =＞ h(App), }).$mount(‘#app‘)是什么意思?

最新推荐文章于 2024-03-14 09:32:58 发布

原创最新推荐文章于 2024-03-14 09:32:58 发布 · 635 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

vue.js 专栏收录该内容

54 篇文章

订阅专栏

本文详细介绍了Vue.js中的render函数及其与createElement的关系，render函数用于通过h辅助函数生成虚拟DOM节点VNode，最终转化为真实DOM。简写形式如render:h=>h(App)。同时，文章讲解了Vue实例的挂载，包括自动挂载与手动挂载$mount('#app')。深入理解这些概念对于掌握Vue应用的构建至关重要。

render函数的作用

render函数是vue通过js渲染dom结构的函数createElement，约定可以简写为h

render: h => h(App);

缩写前

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

继续缩写

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

继续缩写

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

箭头函数

render: h => h(App);

实际渲染

import App from './App'
import Vue from 'vue'
new Vue({
  el:'#root',
  template:'<App></App>',
  components:{
    App
  }
})

手动挂载

在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$mount(’#app’)进行挂载。
// 配置了el属性：

new Vue({
    el:"#app",
    router
});

// 如果没有配置el属性，可以使用手动挂载$mount("#app")

new Vue({
    router
}).$mount('#app');

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