vue中的<template>标签与react中的<></>标签区别详解

vue <template>与react<></>标签

vue2中的<template></template>标签 与 react中的<></>标签类似，在编译后渲染时不会产生DOM实体。(我们把它们都称为空标签)

在vue2中，<template></template>标签会用来作为组件的根标签(template, script, style三段式中的template)。在<template>作为根标签之外，<template>也可以做为普通的标签使用。作为根标签、作为普通标签使用的<template>在页面上均不会产生DOM实体。

在React中，<></>是React中的Fragment语法，用于将多个React元素组合在一起，或者三元运算符中空标签的占位。<></>也不会产生DOM实体。

相同点

1、两者都可以用来包裹组件的内容，也可以用来定义组件模板。

2、两者都支持嵌套使用，可以用来创建复杂的组件结构。

3、两者都支持使用条件渲染和循环渲染等功能。

不同点

1、作为根标签使用时，在 Vue2 中，组件必须包含唯一一个根元素，因此 <template></template> 标签内部只能有一个产生DOM实体的元素。

<template>  ←根标签
  <div></div>
  <span></span>
</template>

↑这种方式编译不通过，会提示"Component template should contain exactly one root element." 这里有<div></div> <span></span> 两个同级的DOM元素，违背了唯一根元素的要求。

<template>  ←根标签
  <template> ←root element
  </template>
</template>

↑这种方式编译也不通过，会提示"Cannot use <template> as component root element because it may contain multiple nodes." 作为root element的<template>可能含有多个子DOM实体，这是vue2不允许的。

而在 React 中，<></>内部可以有多个同级的元素，没有vue2<template>这么多限制。

return (
  <>
    <div></div>
    <span></span>
  </>
)

↑这里的代码没问题。

此外

在vue中使用<template></template>标签，需要注意vue实例绑定的元素内部(<div id="app"></div>内部)的template标签不支持v-show指令(即v-show="false"对template标签来说不起作用)。但v-if、v-else-if、v-else是可用的。

在react中使用<></>标签不可以传递键值或属性。

由于空标签在编译后渲染时不会产生html实体，如果空标签的子元素需要继承父元素高度，直接写height: 100%; 就可以，而如果使用<div>之类的块元素标签，则块元素标签也需要加上height: 100%。

以上就是vue中的<template>标签与react中的<></>标签区别详解的详细内容，更多关于vue <template>与react<></>标签的资料请关注脚本之家其它相关文章！

最新评论