Vue与React的区别

 阅读前提：对Vue,React.js有一定的了解

 

1.改变数据改变视图的方式

 

vue 通过 this.obj.a = 'aa' 直接赋值或者 this.$set(this.obj, 'a', 'aa')

react 通过 this.setState({a: 'aa'})  更加的统一化明显，易于查找

 

2.React.js把页面的改变当作一帧一帧的动画对待

 

3.React.js的事件需要自己绑定this值,Vue已经绑定好

 

4.React.js对于表单原件没有v-model的双向绑定语法糖

 

5.React.js更贴近原生JS,利用原生JS去实现v-for指令

 

6.React.js统一父组件自上而下的数据流清晰，bug覆盖面低，易于差错

 

7.React.js中利用props.children实现Vue slot功能

 

8.React.js组件名开头字母必须大写

 

           看了React的Tic Tac Toe，为了对比两个框架，遂用Vue实现了一遍

           整个流程，按照循序渐进的方式分为5个demo

           01demo 主要用来实现9个小格都显示相应数字数字，主要利用了 slot

           02demo 实现小格可以填写X，利用v-for快速生成模版

           03demo 实现小格可以切换X或O,并且有提示下一个填写X或O

           04demo 实现了计算胜利者

           05demo 实现了时光穿梭，可以记录每一步，数组类型的值要进行浅层复制，否则会导致每一次的数据都一样

           欢迎star:  github地址

           大家可以自己动手做一遍，总结下React和Vue差别