Vue 与 React 的浅层 PK

Question

包装节点：<template> 与 <React.Fragment>

Vue 的 <template> 的子节点只能唯一，遇到多个子节点还要用 <div> 包裹（那你这个 <template> 不就等于多此一举了嘛）。而 React 的 <React.Fragment> 则无限制，更骚的是，人家还能简写 <>，形象又生动。

这一轮，React 胜。

组件状态的内外控制：.sync

很常见的场景，比如一个弹框组件，我可以从外部打开它（比如一个弹框按钮），也可以通过弹框里面的关闭按钮关闭它。

通常我们会这样设计：组件的 visible 完全由外部控制，如果内部想改变 visible 状态，在 React 中我们会给组件添加一个回调方法的参数（通常叫做 onClose），在 Vue 中我们会 emit 一个 update:visible 的事件 ，然后在组件外部完成对 visible 的改变。

这个逻辑没错，也很清晰，但是写起来绕。Vue 提供了 .sync 修饰符帮助处理简化了组件外部的写法（实际上是个语法糖），但是组件内部仍然需要手动 emit。并且，在组件嵌套时，中间组件无法使用 .sync，会涉嫌修改 props，所以还得在中间组件中老老实实手动 emit。这样一来还不如 React 直接透穿参数方便。

这一轮，算 Vue 小胜。