关于前端:VueReact-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%。

完结。

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