真正的学习通常发生在实践的过程中，为了了解而去进行的学习往往容易脱离真实环境，不够彻底。

新工作新业务的驱动，导致我需要重新学习 React 和 TypeScript，所以，这是我对 Vue 和 React 异同点的一次总结，我希望不仅仅局限于使用层面。

叙述结构按照组件化进行描述，即：异同点会在同一个话题进行总结。

数据流

Vue

Vue 是基于 Object.defineproperty 及观察者模式实现的双向绑定，包括对所有 “类 DOM 原生元素” 的数据流包装，各种双向控件的 v-model 就是一种表现。 前端框架里 Directive 的实现最早来自于 angular.js，但在以 angular.js 为代表的 MVC 时代，Controller 往往才是主角，相当于 Vue 中的组件的 Script 部分。

至于数据流的单双向问题，更多取决于开发者的业务实现，在 Vue2.0 之后，官方提倡优先以单向数据流为设计原则。

由于基于 Object.defineproperty 所以 Vue.js 有条件在核心就支持 computed 等相关数据动态计算功能，而 React 中是不存在的。

React

React 本身不存在整循环的数据绑定，它更专注于 State > View 的最优更新这件事。

所以，任何事件产生的数据 Input 需通过我们自组织的业务逻辑来完成 State 的更新，继而 Diff 计算后进行 View 更新； 并且，React 依然提供了允许我们手动管理 View 更新与否的能力，而在 Vue 中这一点是被内部自动优化的。

小结

Vue 靠 Object.defineproperty 对象的拦截知道何时更新视图，React 靠 setState 的代理模式来做到同样的事。 假设丢弃或不使用 Vue 中 v-model 类似的 API，你会发现单事件流来说和 React 其实没什么区别。

Vue 的组件系统中，我们往往假设数据是可变的，所以也往往都是直接改变数据，正因为如此，我们可以得到最细粒度更新的效果。

React 提倡数据不可变，每一次我们应该创建一个新的 State 覆盖之前的，至于最终更新所需的资源靠 Diff 算法来优化。

两种拦截模式背后进行了怎样复杂的计算？

Vue 在不同环境下会降级为不同的异步 API 作为一个数据捕获周期，如 Promise.resolve().then MutationObserver setTimeout。

React 根据版本不同，有稍微不同的更新策略，大致是维护一个状态队列，将所有状态的更改推进队列，按照不同的事务类型进行不同周期的批量更新。

So

• React 中的 state 等价于 Vue 中的 data
• React 中的 setState 等价于 Vue 中的 直接赋值
• React 中的 setState.callback 等价于 Vue 中的 $nextTick
• React 中的 render 等价于 Vue 中的 render/template

更详细可以参考官方文档。

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
          // Vue 中的双向绑定
export default {
  name: 'some-component',
  template: `<input name="count" v-model="count" />`,
  data() {
    return {
      count: 1
    }
  }
}

// Vue 中实现单向数据流
export default {
  name: 'some-component',
  template: `<input name="count" :value="count" @input="handleChange" />`,
  data() {
    return {
      count: 1
    }
  },
  methods: {
    handleChange(event) {
      this.count = event.target.value
    }
  }
}

// React 中实现单向数据流
class SomeComponent extends React.Component {
  constructor() {
    this.state = { count: 1 }
  }

  handleChange(event) {
    this.setState({ count: event.target.value })
  }

  render() {
    return (
      <div>
        <input value={this.state.count} onChange={this.handleChange} />
      </div>
    )
  }
}

        

事件流

Vue

按照我的理解，Vue 对于原生 DOM 元素的原生事件都有进行一层包装，简单说就是将所有 dispatchEvent 转化为基于中介者模式的 $emit， 最终导致了事件传播形式的统一，开发者只需要关注框架的事件派发标准就可以。

并且，Vue 中对于各 DOM 元素绑定的事件会被转换为真实 DOM 的事件绑定，顺序为：

TemplateEvent > DomEvent + Decorate > CompoentEvent

各种修饰符，就是在 “包装转化的这一层” 对事件进行了不同程度的：冒泡处理、拦截处理等等...

比如一个例子：

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
          <!-- 事件捕获 + 停止传播 -->
<div class="box" @click.capture.stop="handleClick"></div>

<!-- 转换后的伪代码 -->
<script>
  box.addEventListener(
    "click",
    (event) => {
      event.stopPropagation();
      handleClick(event);
    },
    false
  );
</script>

        

React

在 React 中，为了兼顾浏览器兼容性、事件统一机制的高性能，React 内置了一套 SyntheticEvent 用于统一事件管理的系统。

简单说，从头到尾，React 只为最顶级元素绑定了一大套事件，我们为某某元素绑定的事件都相当于在 React 的 SyntheticEvent 里 “注册”； 当事件发生时，我们注册的事件会相应地被触发。

我们为 “类原生 DOM” 组件/元素 绑定的事件并不会真正地转化为真正的 Dom 事件，而是被挂载在 SyntheticEvent 系统的不同周期内进行触发和处理； 这些挂载的事件中得到的 Event 对象是经过 SyntheticEvent 包装后的复合对象，由原生事件产生，由 SyntheticEvent 加工得到的。

如果一定要得到原生事件属性，可通过 nativeEvent 访问得到；SyntheticEvent 支持大部分 Dom 原生事件，但不是全部； 如果需要支持 SyntheticEvent 之外的事件需要在 React 的生命周期中挂载和卸载事件，也就是原生的 window.addEventListener。

由于 SyntheticEvent 是共享的。意味着在调用事件回调之后，SyntheticEvent 对象将会被重用，并且所有属性会被置空。这是出于性能因素考虑的。 因此，您无法以异步方式访问事件。

小结

从使用层面看，这俩也没啥区别，hahaha~

          
1
2
3
4
5
          <!-- Vue 中事件捕获 + 停止传播 -->
<div class="box" @click.capture.stop="handleClick"></div>

<!-- React 中事件捕获 + 停止传播 -->
<div class="box" onClickCapture={event => event.stopPropagation() && handleClick()}></div>

        

组件通信

两者的通信机制基本类似。

• “父 > 子”：数据不可变，单向数据流
• “子 > 父”：事件派发（Vue），回调派发（React）

复杂的跨组件通信，两者都有对应的 MessageBus/Store 的解决方案。

Vue

Vue 内置了基于中介者模式事件派发机制，使用 $emit 和 $on 作为事件额派发器和接收器。

React

在组件通信里，React 的事件系统并不能为其进行服务，所以往往是将 父组件的事件处理 以 props 的形式传递给子组件直接调用。

小结

这两者的区别更多体现在事件传递，感觉 React 回调传递会导致组件间不能彻底解耦，当你为宿主组件编写处理逻辑时还需要了解子组件的 API、内部逻辑。

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
          <!-- Vue 父子通信 -->
<template>
  <div
    class="child"
    @click="$emit('click-children', 'i am child 1 event data')"
  />
</template>

<template>
  <div class="parent">
    <children @click-children="handleChildrenClick"></children>
  </div>
</template>

<!-- React 父子通信 -->
<script>
  function Child(props) {
    return <div className="child" onClick={props.onChildClick}></div>;
  }

  class Parent extends React.Component {
    constructor(props) {
      super(props);
    }

    onChildClick(event) {
      console.log("onChildClick", event);
    }

    render() {
      return <Child onChildClick={this.onChildClick} />;
    }
  }
</script>

        

Diff 算法

没仔细研究过，研究过也没看懂，所以，不知道。

模板语法

Vue

数据 IO 的类型采用不同前缀体现，当然本质上也都是内置的 Directive。 Directive 提供了大部分 View 层所需的展示逻辑功能。

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
          <!-- 数据传递： -->
<some-compnent :attrdata="someData" />
<some-compnent strattr="someStr" />

<!-- 事件绑定： -->
<some-compnent @event.decorate="eventHandle" />

<!-- 指令绑定： -->
<some-compnent v-some-directive:name="directiveAttr" />

<!-- 渲染逻辑： -->
<a-compnent v-if="isTrue" />
<b-compnent v-else />
<list-item-component v-for="item in list" :key="item.id"
  >{{ item.name }}</list-item-component
>

<!-- 插值实例： -->
<div class="component-a">
  <p>这是一个 A 组件</p>
  <slot></slot>
</div>

<component-a>
  <p>我是给 A 组件的内容</p>
</component-a>

<!-- output -->
<div class="component-a">
  <p>这是一个 A 组件</p>
  <p>我是给 A 组件的内容</p>
</div>

        

React

数据 IO 的类型统一采用花括号 {} 或属性值 "" 体现。 默认并不存在 Directive，View 层所需的展示逻辑功能都需要自行业务编码。

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
          <!-- 数据传递： -->
<Compoent data="{someData}" title="stringTitle" />

<!-- 事件绑定： -->
<Compoent onEvent="{eventHandle}" />

<!-- 渲染逻辑：三目运算输出值、三目运算输出不同组件、输出循环列表 -->
<script>
  render() {
    return (
      <div>User {isLoggedIn ? 'username logged in' : 'not login'}</div>
      { isLoggedIn ? (
          <LogoutButton onClick={this.handleLogoutClick} />
        ) : (
          <LoginButton onClick={this.handleLoginClick} />
        )
      }
      <ul>
        { numbers.map((number) =>
          <li key={number.toString()}>{number}</li>
        )}
      </ul>
    )
  }
</script>

<!-- 插值逻辑： -->
<script>
  function Box(props) {
    return (
      <div className="box">
        <div className="box-inner">{props.children}</div>
      </div>
    );
  }

  function App() {
    return (
      <Box>
        <div className="login-box">
          <p>登陆弹窗</p>
        </div>
      </Box>
    );
  }
</script>

        

CSS 方案

Vue

Vue 使用 loader 来抽离和打包 CSS，使用 CSS3 属性选择器实现作用域隔离， 但 CSS3 隔离属性在编译期生成，所以会有一些不可逆的弊端，比如无法根据动态组件结构来实现动态的 deep scope。

如 Angular 就有大概 4-5 种方案来实现作用域隔离。

React

貌似 React 的 CSS 作用域方案都通过 All in js 实现。

其他待续...

2019-07-29 补充：

就 template 来说：

• Vue == declarative programming
• React == imperative programming

设计结果背后的设计目的

• Vue 需要 DSL，且需要关注 DSL，DSL 是其灵魂，实际上 Vue 的 DSL 很简单，且满足并约束了大部分开发场景，弱化了开发者的自由度，使开发者仅需关注业务（组件）单元的关系。
• React 没有 DSL，React 只有 JSX，JSX 的本质就是 JS，开发者需要关注「使用 JS 渲染数据」的最优解，同时需要关注额外的数据单元组织，抽象能力对 React 项目的组织有很大影响。

在 Vue 中，绝大部分抽象在 Vue 被表现为 filter、directive、event... 在 React 中，大部分抽象可能都会是函数，而对函数的设计和运用就至关重要了。

完。