React 和 Vue 的不同编程模型

目录

1、Vue 的编程模型

2、React 的编程模型

3、两个框架的不同理念

---

1、Vue 的编程模型

接触 Vue 的开发者应该都知道，在 Vue 中一旦内部数据改变了，视图就会随之更新，这是因为 Vue 的 数据响应式原理：Vue 对其构造选项 options 的 data 中的数据进行了篡改并监听，一旦监听数据发生变化，Vue 就会去刷新视图。

在 Vue 的编程模型中，一个数据对象对应一个虚拟 DOM 节点，当对象的属性改变时，Vue 就会将相关的 DOM 节点全部更新。

2、React 的编程模型

由于 React 没有像 Vue 一样，对其内部数据 state 进行监听，这就使得 React 不知道其内部数据什么时候改变了，只有开发人员知道，所以需要开发人员在改变 state 数据时调用 setState() 或 setN() 去 异步 刷新视图。

而且 React 提倡的时数据不可变理念，当开发人员需要改变内部数据 state 时，不建议修改旧的 state，而是声明新的 state 将旧的 state 进行覆盖。

在 React 的编程模型，一个对象对应一个虚拟DOM，另一个对象，对应另一个虚拟 DOM。对比两个虚拟DOM，找不同（DOM diff），最后局部更新DOM

3、两个框架的不同理念

React 的理念是 数据不可变，它会通过 setN() 声明 新数据，而 Vue 的理念是 数据响应式，它提倡改变原数据。