深入理解Vue组件之render函数

最新推荐文章于 2024-03-31 18:00:22 发布

趣学旅程

最新推荐文章于 2024-03-31 18:00:22 发布

阅读量836

点赞数

文章标签： vue.js flutter 前端

本文链接：https://blog.csdn.net/quxuetrip/article/details/131787143

版权

一般来说，我们写 Vue.js 组件，模板都是写在 <template> 内的，但它并不是最终呈现的内容，template 只是一种对开发者友好的语法，能够一眼看到 DOM 节点，容易维护，在 Vue.js 编译阶段，会解析为 Virtual DOM。

与 DOM 操作相比，Virtual DOM 是基于 JavaScript 计算的，所以开销会小很多。

正常的 DOM 节点在 HTML 中是这样的：

<div id="main">
  <p>文本内容</p>
  <p>文本内容</p>
</div>

用 Virtual DOM 创建的 JavaScript 对象一般会是这样的：

const vNode = {
  tag: 'div',
  attributes: {
    id: 'main'
  },
  children: [
    // p 节点
  ]
}

vNode 对象通过一些特定的选项描述了真实的 DOM 结构。

在 Vue.js 中，对于大部分场景，使用 template 足以应付，但如果想完全发挥 JavaScript 的编程能力，或在一些特定场景下，需要使用 Vue.js 的 Render 函数。

正如上文介绍的 Virtual DOM 示例一样，Vue.js 的 Render 函数也是类似的语法，需要使用一些特定的选项，将 templat

关注