vue程序运行过程以及render函数详解

最新推荐文章于 2024-10-22 15:37:45 发布

masshoi

最新推荐文章于 2024-10-22 15:37:45 发布

阅读量544

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44223292/article/details/115387315

版权

本文详细介绍了Vue程序的运行过程，包括runtime-compiler和runtime-only两种模式的区别。runtime-compiler模式下，template经过编译成AST再生成render函数，而runtime-only则跳过编译步骤，提高性能。Vue-loader用于加载.vue文件，vue-template-compiler负责解析为render函数。render函数通过createElement创建虚拟DOM节点（VNode）。文章还深入探讨了createElement的参数及其实现原理，并提供了代码示例。

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

Vue程序运行过程

vue程序运行过程
这个图就是一个vue文件的完整运行过程，在用vue-cli2创建项目时,会让我们选择两种类型：1.runtime-compiler 2.runtime-only
这两种类型的区别就在于：
1.runtime-compiler：
template -> ast -> render -> vdom -> ui
2.runtime-only
render -> vdom -> ui
通过这种方式创建的项目vue文件跳过了前两个流程，所以性能更高,代码量更少
// 省去了前两个步骤,那么.vue文件的template是由谁来处理的呢？
// vue-loader用来加载.vue文件
// vue-template-compiler用来解析.vue文件,将解析成render函数

render函数

render: function (createElement) { return createElement('h1', this.blogTitle) }
createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

createElement接受的参数：

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中 attribute 对应的数据对象。可选。
  {
    class: 'app'
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

除了可以按以上方法传入参数，还可以直接传入组件

部分参考：https://blog.youkuaiyun.com/weixin_42043532/article/details/108066372