Vue中template有且只能一个root的原因解析(源码分析)_vue/valid-template-root - CSDN文库

95 浏览量更新于2023-05-10 收藏 196KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

Vue 中中 template 有且只能一个有且只能一个 root的原因解析的原因解析(源码分析源码分析)

主要介绍了Vue 中 template 有且只能一个 root的原因解析,本文从源码角度分析给大家介绍的非常详细，对大家

的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

引言引言

今年，疫情疫情并没有影响到各种面经的正常出现，可谓是络绎不绝（学不动...）。然后，在前段时间也看到一个这样的关于 Vue

的问题，为什么每个组件为什么每个组件 template 中有且只能一个中有且只能一个 root？？

可能，大家在平常开发中，用的较多就是 template 写 html 的形式。当然，不排除用 JSX 和 render() 函数的。但是，究其本质，

它们最终都会转化成 render() 函数。然后，再由 render() 函数转为 Vritual DOM （以下统称 VNode ）。而 render() 函数转为 VNode

的过程，是由 createElement() 函数完成的。

因此，本次文章将会先讲述 Vue 为什么限制 template 有且只能一个 root 。然后，再分析 Vue 如何规避出现多 root 的情况。那

么，接下来我们就从源码的角度去深究一下这个过程！

一、为什么限制一、为什么限制 template 有且只能有一个有且只能有一个 root

这里，我们会分两个方面讲解，一方面是 createElement() 的执行过程和定义，另一方面是 VNode 的定义。

1.1 createElement()

createElement() 函数在源码中，被设计为 render() 函数的参数。所以官方文档也讲解了，如何使用 render() 函数的方式创建组

件。

而 createElement() 会在 _render 阶段执行：

...

const { render, _parentVnode } = vm.$options

...

vnode = render.call(vm._renderProxy, vm.$createElement);

可以很简单地看出，源码中通过 call() 将当前实例作为 context 上下文以及 $createElement 作为参数传入。

Vue2x 源码中用了大量的 call 和 apply，例如经典的 $set() API 实现数组变化的响应式处理就用的很是精妙，大家有兴趣可以

看看。

$createElement 的定义又是这样：

vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

需要注意的是这个是我们手写 render() 时调用的，如果是写 template 则会调用另一个 vm._c 方法。两者的区别在于

createElement() 最后的参数前者为 true，后者为 false。

而到这里，这个 createElement() 实质是调用了 _createElement() 方法，它的定义：

export function _createElement (

context: Component, // vm实例

tag?: string | Class<Component> | Function | Object, // DOM标签

data?: VNodeData, // vnode数据

children?: any,

normalizationType?: number

): VNode | Array<VNode> {

...

}

现在，见到了我们平常使用的 createElement() 的庐山真面目庐山真面目。这里，我们并不看函数内部的执行逻辑，这里分析一下这五个参

数：

context ，是 Vue 在 _render 阶段传入的当前实例

tag ，是我们使用 createElement 时定义的根节点 HTML 标签名

data ，是我们使用 createElement 是传入的该节点的属性，例如 class 、 style 、 props 等等

children ，是我们使用 createElement 是传入的该节点包含的子节点，通常是一个数组

normalizationType ，是用于判断拍平子节点数组时，要用简单迭代还是递归处理，前者是针对简单二维，后者是针对多

维。

可以看出， createElement() 的设计，是针对一个节点，然后带 children 的组件的 VNode 的创建。并且，它并没有留给你进行多

root 的创建的机会，只能传一个根 root 的 tag ，其他都是它的选项。

1.2 VNode

我想大家都知道 Vue2x 用的静态类型检测的方式是 flow ，所以它会借助 flow 实现自定义类型。而 VNode 就是其中一种。那么，

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38507121

粉丝: 10
资源: 929

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈