1. 1.设计思想
    2. vue的官网中说它是一款渐进式框架,采用自底向上增量开发的设计。
    3. react主张函数式编程,所以推崇纯组件,数据不可变,单向数据流,当然需要双向的地方也可以手动实现,
    4. 比如借助 onChange setState 来实现一个双向的数据流。
    5. 2.编写语法
    6. Vue推荐的做法是webpack+vue-loader的单文件组件格式,vue保留了htmlcssjs分离的写法
    7. React的开发者可能知道,react是没有模板的,直接就是一个渲染函数,它中间返回的就是一个虚拟DOM树,
    8. React推荐的做法是 JSX + inline style, 也就是把HTMLCSS全都写进JavaScript了,即'all in js'
    9. 3.构建工具
    10. vue提供了CLI 脚手架,可以帮助你非常容易地构建项目。
    11. React 在这方面也提供了 create-react-app,但是现在还存在一些局限性,不能配置等等
    12. 4.数据绑定
    13. vue是实现了双向数据绑定的mvvm框架,当视图改变更新模型层,当模型层改变更新视图层。
    14. vue中,使用了双向绑定技术,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View
    15. (这里我们可以继续深入讲解一下双向数据绑定的原理,我之前的文章手写Vue源码可参考)
    16. react是单向数据流,react中属性是不允许更改的,状态是允许更改的。
    17. react中组件不允许通过this.state这种方式直接更改组件的状态。自身设置的状态,可以通过setState来进行更改。
    18. (注意:ReactsetState是异步的,导致获取dom可能拿的还是之前的内容,
    19. 所以我们需要在setState第二个参数(回调函数)中获取更新后的新的内容。)
    20. 【这里如果你了解深入的话可以尝试描述一下ReactsetState的异步操作是怎么实现的,Vue中的更新是通过微任务等】
    21. 5.diff算法
    22. vuediff算法实现流程:
    23. 1.在内存中构建虚拟dom
    24. 2.将内存中虚拟dom树渲染成真实dom结构
    25. 3.数据改变的时候,将之前的虚拟dom树结合新的数据生成新的虚拟dom
    26. 4.将此次生成好的虚拟dom树和上一次的虚拟dom树进行一次比对(diff算法进行比对),来更新只需要被替换的DOM
    27. 而不是全部重绘。在Diff算法中,只平层的比较前后两棵DOM树的节点,没有进行深度的遍历。
    28. 5.会将对比出来的差异进行重新渲染
    29. reactdiff算法实现流程:
    30. DOM结构发生改变-----直接卸载并重新create
    31. DOM结构一样-----不会卸载,但是会update变化的内容
    32. 所有同一层级的子节点.他们都可以通过key来区分-----同时遵循1.2两点
    33. (其实这个key的存在与否只会影响diff算法的复杂度,换言之,你不加key的情况下,
    34. diff算法就会以暴力的方式去根据一二的策略更新,但是你加了key,diff算法会引入一些另外的操作)
    35. 复制代码

    React会逐个对节点进行更新,转换到目标节点。而最后插入新的节点,涉及到的DOM操作非常多。diff总共就是移动、删除、增加三个操作,而如果给每个节点唯一的标识(key),那么React优先采用移动的方式,能够找到正确的位置去插入新的节点。
    vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

    react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程,如果shouldComponentUpdate返回的是true,就继续渲染,如果返回了false,就不会重新渲染,PureComponent就是重写了shouldComponentUpdate,然后在里面作了props和state的浅层对比。、、
    image.png

    而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom。
    image.png
    总之,react的性能优化需要手动去做,而vue的性能优化是自动的,但是vue的响应式机制也有问题,就是当state特别多的时候,Watcher也会很多,会导致卡顿,所以大型应用(状态特别多的)一般用react,更加可控。