乐趣区

关于前端:VueReact-vue中的template标签与react中的标签

jiezi

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%。

完结。

同步更新到本人的语雀
https://www.yuque.com/dirackeeko/blog/ua3ldknxs72hbsan

退出移动版