React / Vue 渲染过程对比

React

1.使用JSX语法编写代码
2.webpack打包时，JSX通过babel解析成js
3.js通过React.createElement生成 vnode
4.初次渲染：ReactDOM.render(<App/>, container)
5.再次渲染：setState异步执行，调用renderComponent方法，重新执行实例的render，生成newVnode，与preVnode执行diff算法对比，重新patch更新到html页面中

Vue

1.使用模板语法编写代码
2.webpack打包时，解析Vue模板字符串成 render 函数
3.用Object.defineProperty修改变量的getter/setter方法，实现响应式，开始监听。并将 data 的属性/methods的方法等代理到 vm 上
4.js通过执行 render 函数，获得vnode。并在执行 render 函数过程中，用getter收集依赖
5.初次渲染：通过 patch将vnode 转化成真实DOM，显示页面
6.再次渲染：setter监听到数据变化，触发 updateComponent，重新执行render函数，生成newVnode，与preVnode执行diff算法对比，重新patch更新到html页面中