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 的理念是 数据响应式,它提倡改变原数据。