vue 把组件挂载到视图_React Vs Vue 之数据驱动视图

mvc框架中数据的变化驱动视图的变化，当数据改变时,比如num由1变为10：

// react

this.setState({num: 10})

// vue

this.data.num = 10

复制代码

只需执行简单的代码，就是引起页面视图的变化。两个框架之间是如何做的的呢？

1. React数据驱动视图

要想了解数据驱动视图的过程，首先要了解react的渲染过程：

1. 编写：我们编写的组件都是继承自React.Component(函数式组件除外),组件内部的视图模板文件则

采用jsx的语法进行编写

2. 编译：将我们编写的组件实例编译成一个个的虚拟dom节点(本质就是json对象)

3. 挂载：将虚拟dom节点编译成真实dom，并挂载到界面

复制代码

这只是渲染过程的非常简化的说法，实际每个过程细节都很复杂，在此先不做细节讨论。

而数据驱动视图 this.setState({num:10}) 并非直接导致真实dom的改变，它首先映射到虚拟的dom节点，虚拟dom节点的挂载导致页面视图的变化。

从流程上看，似乎多此一举，直接操作dom节点改变数据不是更直接，为什么要绕弯操作虚拟dom？首先dom操作的会导致浏览器的重绘重排，性能开销比较大。当我们在一个方法中出现了多次数据变化时，每次都要操作dom很浪费性能。有了虚拟dom后，把多次的数据变化先映射到虚拟dom中，最后进行一次挂载，相当于只操作了一次真实dom，有效的降低了性能开销。

今天的主角ÿ