vue和react页面渲染流程对比

React是facebook创建的框架，它推广了虚拟dom和新的js语法----jsx; Vue 是一个新兴的前端视图框架，与 React 类似，实现了前端组件化以及 View-ViewModel 绑定，但是同时又支持跟 Angular 很类似的模版语法，虽然有很多类似的地方，但两者也有很多不同，下面简述两者在渲染流程方面的对比

react渲染流程

• 开始代码：

  //react的jsx语法：
        ReactDOM.render(
          <h1>Hello, world!h1>,
          document.getElementById('example')
        );
  复制代码

• jsx转换：

  实际上React专用的 JSX 语法在运行时会编译为 JS 语法，比如 JSX 的：

   var root = <ul className="list">
           <li>Text Contentli>
         ul>;
  复制代码

  编译成：

   var root = React.createElement('ul', { className: 'list' },
           React.createElement('li', null, 'Text Content')
         );
  复制代码

• 虚拟DOM树组成元素：

  1. ReactElement (组成 React 虚拟 DOM 的基本元素，它对应于真实 DOM 中的 HTMLElement，比如 div，li，或我们自定义的 Component)
  2. ReactNode (React 虚拟 DOM 树的节点，它对应于真实 DOM 的节点。)
  3. ReactClass & ReactComponent (可以将 ReactClass 想象成标签名，即 div,video，这种，但是他不是原生的标签，所以使用前需要先用 createClass 定义好。而 ReactComponent 就是跟 ReactElement 一个级别的东西。)

• ReactDOM & 第一遍渲染：

  有了上面的 ReactNode，ReactElement，ReactComponent，我们就可以完全的定制一棵有状态控制的虚拟DOM树，之所以说是虚拟的，是因为它只是逻辑上的数据结构，跟我们肉眼看到的页面并没有直接的联系。

  我们通过 ReactDOM 这个子库来做跟真实DOM相关的操作，比如将一棵虚拟 DOM 树渲染到一个 HTML 的 DOM 元素中：

     var component = ReactDOM.render(element, container, callback);
  复制代码

  其中第一个参数为一棵虚拟 DOM 树的根节点元素，第二个参数为一个 HTML DOM 元素，返回结果是绑定成功后生成的component 实例的引用（ref）。

  这里又多了一个概念 ReactElement 的实例，据我们所知 ReactComponent 跟 ReactElement 是一个级别的东西，是虚拟 DOM 树的基本结构，为什么还有实例？简单来说，只有一个虚拟的 ReactElement 被绑定到一个真实 DOM 元素上，它内部才能正常运作，所以只有绑定后才能产生一个真正可以调用的实例。

  调用了 ReactDOM.render 之后，这个虚拟 DOM 树的结构将按初始状态原封不动的渲染成真实 DOM 结构，并完成内部 ReactElement 到 DOMElement 的绑定。

  总结为： react中 我们用jsx来写组件，它会被babel转换成纯js，然后Preact的h函数会将这段js转换成DOM树，最后Preact的Virtual DOM算法会将virtual DOM转换成真实的DOM树，来构建我们的应用。

vue渲染流程

• 开始代码：

    var exampleVM = new Vue({
      el: '#example',
      data: exampleData
    })
  复制代码

• vue-component：

  而定义一个 VueComponent 的代码如下：

   // 定义
    var MyComponent = Vue.extend({
        template: '
  A custom component!
  ',
        data: {}
      })
   // 注册
    Vue.component('my-component', MyComponent)
  复制代码

  注册后就可以在 HTML 或其他模版中使用这个 VueComponent：

     <my-component>my-component>
  复制代码

• vue实例与模版编译：

  无论直接使用 new Vue() 还是 new MyComponent() 还是在模版编译过程中使用 VueComponent 都会产生一个对应到 DOM 元素的 Vue 实例，这跟 React 的 ReactComponent 实例十分类似。

  每个 Vue 实例都有一个 data 属性，它相当于 Vue 的 ViewModel 部分，只有赋予到 data 的数据，才能在视图模版中被调用，这一点跟 React 的 state 十分相似。

  在 Vue 实例化的过程中，会对模版（DOM 元素或者字符串模版，字符串模版会先转换成 DOM 元素）进行编译。这个过程会递归地对所有普通元素的 directive 进行初始化，然后返回一个绑定函数，用于绑定 Vue 实例与初始化好的 DOM 元素。

• 视图更新：

  在 Vue 实例化的过程中会对 Vue 实例的 data 属性赋初值（data的值应该是一个对象），Vue 会遍历 data 对象的每一个属性，并将其转换成ES5 getter/setter。这是 Vue 能监听到 data 变化的前提。

  过程可以概括为：

  => 当某个数据属性被用到时，触发 getter，这个属性就会被作为依赖被 watcher 记录下来(与 Angular 的 $watch 类似，Vue directive 初始化过程会创建对应的 Watcher)。

  => 整个函数被渲染完的时候，每一个被用到的数据属性都会被记录。

  => 相应的数据变动时，例如给它一个新的值，就会触发 setter，通知数据对象对应数据有变化。

  => 此时会通知对应的组件，其数据依赖有所改动，需要重新渲染。

  => 对应的组件再次调动渲染函数，生成 Virtual DOM，实现 DOM 更新。

参考文档：

• react和vue的渲染流程对比
• 浅谈React的V-DOM结构
• Vue原理解析之Virtual Dom

转载于:https://juejin.im/post/5b593224f265da0f7e6293da